javascript - d3.js 强制有向图不起作用
问题描述
每当我尝试启动我的代码时,我都会在开发控制台中收到以下错误。以下错误:
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 进行调试,但似乎无法找出问题所在。
任何帮助表示赞赏。
解决方案
您缺少“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>
推荐阅读
- reactjs - 仅当新订阅数据到达时,我如何才能重新获取()我的查询?
- scala - 什么是与 pipeTo 等效的 Akka 类型?
- javascript - THREE.js 不会加载我的 .mtl 和 .obj 文件
- css - 使用 html/css 重叠行
- java - 在 Spark Java API 中加入行数据集
- javascript - JavaScript 代码无法按预期工作
- c# - 获取 Selected ListBox 项 MVVM
- android - 很遗憾
已经停止。(android 工作室)当 insatll - c# - 是否可以将变量类型返回给调用协程的脚本?
- ruby - SimpleCov 在合并结果时报告 100% 覆盖率