使用bl.ocks.org

时间:2016-10-07 02:50:42

标签: javascript jquery json d3.js

我不是一个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 noob。

StackOverflow参考

stackoverflow reference 1

stackoverflow reference 2

1 个答案:

答案 0 :(得分:2)

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

但在此之后你仍然会收到错误

  

无法读取属性'重量'未定义的

根据经验,原因可能是您links中的sourcetarget nodes中不存在。

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

Here是一个更新的小提琴,添加了d3作为外部资源,并删除了包含附录的链接