Javascript d3.js力定向图不起作用_Javascript_D3.js_Three.js_Analytics_Visualization

Javascript d3.js力定向图不起作用

javascript d3.js three.js

Javascript d3.js力定向图不起作用,javascript,d3.js,three.js,analytics,visualization,Javascript,D3.js,Three.js,Analytics,Visualization,每当我试图加速我的代码时，我都会在开发控制台中遇到以下错误。错误如下： Error: missing: 1 3d-force-graph:5:22166 TypeError: r.attributes.position is undefine 此处显示的错误代码的实时版本：此处的实际代码： <!DOCTYPE html> <meta charset="utf-8"> <head> <style> body { margin

每当我试图加速我的代码时，我都会在开发控制台中遇到以下错误。错误如下：

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

此处显示的错误代码的实时版本：

此处的实际代码：

<!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>


正文{页边距：0；}
const elem=document.getElementById（'3d-graph'）；
常量图=ForceGraph3D（）
（要素）
.graphData（{“节点”：[{“名称”：“米里哀”，“组”：1}，{“名称”：“拿破仑”，“组”：1}]，链接：[{“源”：1，“目标”：2，“值”：1}]
.nodeLabel（'id'））
.nodeAutoColorBy（‘组’）
.onNodeHover（node=>elem.style.cursor=node？“指针”：null）
.onNodeClick（节点=>{
//从外部瞄准节点
常数距离=40；
const distRatio=1+距离/Math.hypot（node.x，node.y，node.z）；
照相定位(
{x:node.x*distRatio，y:node.y*distRatio，z:node.z*distRatio}，//新位置
node，//注视（{x，y，z}）
3000//ms转换持续时间
);
});

这是以下代码的分支：

我唯一改变的是我替换了jsonUrl方法，这样我就可以通过静态数据来代替

我尝试过通过开发人员控制台进行调试，但似乎无法解决问题

非常感谢您的帮助。

您缺少“id”属性


正文{页边距：0；}
const elem=document.getElementById（'3d-graph'）；
常量图=ForceGraph3D（）
（要素）
.graphData（{“nodes”：[{“name”：“Myriel”，“group”：1，“id”：1}，{“name”：“poleon”，“group”：1，“id”：2}]，链接：[{“source”：1，“target”：2，“value”：1}]
.nodeLabel（'名称'）
.nodeAutoColorBy（‘组’）
.onNodeHover（node=>elem.style.cursor=node？“指针”：null）
.onNodeClick（节点=>{
//从外部瞄准节点
常数距离=40；
const distRatio=1+距离/Math.hypot（node.x，node.y，node.z）；
照相定位(
{x:node.x*distRatio，y:node.y*distRatio，z:node.z*distRatio}，//新位置
node，//注视（{x，y，z}）
3000//ms转换持续时间
);
});

你太棒了，非常乐于助人！我有一种感觉，那是一件很愚蠢的事情。我在屏幕上看了很长时间，没能看到问题就在眼前。非常感谢。