d3.js Силовой направленный граф не работает

Question

d3.js Силовой направленный граф не работает

1

Я получаю следующую ошибку в консоли dev каждый раз, когда я пытаюсь развернуть мой код. Ошибки ниже:

    Error: missing: 1 3d-force-graph:5:22166
    TypeError: r.attributes.position is undefine

Живая версия ошибочного кода, представленная здесь: https://s3.amazonaws.com/mnas/index.html

Фактический код здесь:

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <style> body { margin: 0; } </style>
   <script src="//unpkg.com/3d-force-graph"></script>
  <!--<script src="3d-force-graph.js"></script>-->
</head>

<body>
  <div id="3d-graph"></div>

  <script>
    const elem = document.getElementById('3d-graph');
    const Graph = ForceGraph3D()
      (elem)
    .graphData({"nodes":[{ "name": "Myriel","group":  1 },{ "name": "Napoleon","group":  1 }], links: [ { "source":  1,  "target":  2,  "value":  1 }]})
        .nodeLabel('id')
        .nodeAutoColorBy('group')
        .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
     .onNodeClick(node => {
          // Aim at node from outside it
          const distance = 40;
          const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);

          Graph.cameraPosition(
            { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
            node, // lookAt ({ x, y, z })
            3000  // ms transition duration
          );
        });
  </script>
</body>

Это вилка следующего кода: https://github.com/vasturiano/3d-force-graph/blob/master/example/click-to-focus/index.html

Единственное, что я изменил, это то, что я заменил метод jsonUrl, чтобы вместо этого перейти через статические данные.

Я пробовал отладку через Dev Console и, похоже, не понял эту проблему.

Любая помощь приветствуется.

user1599325 24 окт. 2018, в 05:17

Источник

Теги:

javascript

d3.js

three.js

visualization

analytics

1 ответ

Ещё вопросы

Umesh Maharshi · Answer 1 · 2018-10-24T02-10-00.000Z

У вас отсутствует атрибут "id"

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <style> body { margin: 0; } </style>
   <script src="//unpkg.com/3d-force-graph"></script>
  <!--<script src="3d-force-graph.js"></script>-->
</head>

<body>
  <div id="3d-graph"></div>

  <script>
    const elem = document.getElementById('3d-graph');
    const Graph = ForceGraph3D()
      (elem)
    .graphData({"nodes":[{ "name": "Myriel","group":  1, "id" : 1},{ "name": "Napoleon","group":  1, "id": 2 }], links: [ { "source":  1,  "target":  2,  "value":  1 }]})
        .nodeLabel('name')
        .nodeAutoColorBy('group')
        .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
     .onNodeClick(node => {
          // Aim at node from outside it
          const distance = 40;
          const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);

          Graph.cameraPosition(
            { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
            node, // lookAt ({ x, y, z })
            3000  // ms transition duration
          );
        });
  </script>
</body>

Ты потрясающий и такой полезный Умешь! У меня было чувство, что это что-то глупое. Я так долго смотрел на экран, что не мог видеть, что проблема была прямо перед моим лицом. Спасибо!