修改强制布局 - 使用索引而不是引用会产生TypeError

时间:2015-02-24 16:51:09

标签: d3.js

我正在研究基于Modifying a Force Layout示例的简单D3强制定向布局,该示例工作正常,使用setTimeout回调更新的硬编码数据:

enter image description here

但是,我将从服务器动态加载数据作为JSON,因此希望将链接sourcetarget指定为nodes数组的索引,而不是对实际JavaScript节点对象的引用。 documentation;

中描述了此选项
  

注意:源和目标属性的值最初可能是   指定为nodes数组的索引;这些将被替换为   呼叫开始后的参考。

作为第一步,我尝试修改示例以使用索引;在下面的代码段中:

var a = {id: "a"}, b = {id: "b"}, c = {id: "c"};
nodes.push(a, b, c);
links.push({source: a, target: b},{source: a, target: c},{source: b, target: c});
start(); // joins the data, (re)starts the d3.layout.force

我只更改了一行,将索引用于节点,如下所示:

links.push({source: 0, target: 1},{source: 0, target: 2},{source: 1, target: 2});

但是,这会导致d3.v3.min.js(Firefox 35.0.1)的JavaScript错误:

TypeError: u is undefined

并且图形仅部分创建 - 显示所有3个节点,但只显示一个链接:

enter image description here

是否可以这种方式使用索引?

1 个答案:

答案 0 :(得分:3)

不,使用力矩布局的当前实现,以这种方式使用索引是不可能的。当您开始布局时,链接中的所有索引都将被对象的引用替换(这就是文档说您可以使用索引的原因,请参阅the source的第223-229行)。当您在没有(重新)启动布局的情况下推送索引时,这种替换不会发生并且代码会中断。

您可以选择两种方法 - 推送对节点对象的引用,或者在每次推送后调用力布局上的.start()。请注意,对于后者,您还应该在推动之前停止布局,并且将重新初始化所有力,使布局非常“紧急”#34;每当你改变一些东西。

听起来像是在你的情况下推送对节点对象的引用而不是索引不会成为问题,因为你可以访问节点数组。所有你需要做的就是索引它,就像在D3源中一样。