javascript - 使用来自 bl.ocks.org 的力导向图示例

Question

我一点也不是 javascript、jquery、json 专家。

我的目标是使用来自 bl.ock.us 的力导向图示例创建一组数据的图表。 .
1)我写了一个python脚本来生成json格式。 2) 查看其他人如何使用 jsfiddler 测试他们的 force-directed graph例如，我为 my example 创建了自己的 jsfiddler

问题

图表在我的示例中没有显示!我相信我的 json 格式数据是正确的。我不知道为什么它不起作用。我看到上面 (2) 中的引用示例与我的示例之间的唯一区别是数据的排序和数据的数量。

引用示例中数据的排序是:

{ "nodes":[{"name": "nodeName1","group":1}, 
           {"name": "nodeName2","group":1}, 
           ...,
           {"name": "nodeNameN","group":1}]
 ,"links":[{"source":"nodeNameX", "target":"nodeNameY", "value":3}]}

我的json格式的数据顺序是:

{ "nodes": [{ "group":1, "name":"nodeName1"},
              ....,
             { "group":M, "name":"nodeNameK"}],
  "links": [{"value": 1, "source": "nodeNameU", "target": "nodeNameV"}]

我看到的唯一主要区别是 json 数据中键的顺序。这有关系吗？再一次，我是一个完全的 json，javascript 菜鸟。

StackOverflow 引用资料

stackoverflow reference 1

stackoverflow reference 2

Answer 1

查看浏览器中的控制台输出，您可以看到 d3 是未知的，因此您需要包含 d3 库。在 JSFiddle 中，添加 https://d3js.org/d3.v3.js到外部资源。

但是在这之后你仍然会得到一个错误提示

Cannot read property 'weight' of undefined

根据经验，这可能是因为您在 links 中的 source 或 target 在 中不存在节点。

更新:我做了一个快速检查，在你的链接中你有一个目标名称 AppendixJ 但这不能在 nodes 中找到。

Here是一个更新的 fiddle ，添加了 d3 作为外部资源，并删除了包含 AppendixJ 的链接