NaN on Force-Directed Layout Append in D3.js答案

【问题标题】：NaN on Force-Directed Layout Append in D3.jsNaN on Force-Directed Layout Append in D3.js
【发布时间】：2012-05-03 16:15:11
【问题描述】：

我在 D3 中使用强制导向布局，它从 JSON 文件中获取数据，然后，当双击其中一个节点时，查询数据库以查找指向该节点的链接并更新链接和节点数组尝试将新数据附加到可视化项。似乎在没有链接的情况下附加节点时，它们工作正常，但到 xy 坐标的链接最终是 NaN。在这里可以看到效果，双击其中一个节点即可：

http://blockses.appspot.com/2432083

【问题讨论】：

标签： javascript layout svg d3.js force-layout

【解决方案1】：

我通过重写代码以遵循来自 Bostock 的附加示例的强制导向来解决此问题。当您覆盖节点和链接数组而不是向它们推送数据时，似乎会出现问题，以防有人遇到类似问题。

更新的代码在原始 gist 中，可以在这里看到：

http://blockses.appspot.com/2432083

【讨论】：

对于遇到此问题的任何人，请务必在添加链接之前停止布局。内部刻度计算使用假定与链接具有相同长度的其他数组。在新链接上计算时，内部状态将为undefined，NaN 将传播到新链接的源节点和目标节点的d.x 和d.y。当您调用 force.start() 时，这一切都会重新对齐，因此为确保在任何滴答声发生之前完成此操作，请在添加数据之前停止布局。

【解决方案2】：

旧帖子，但我也遇到了这个问题，我的解决方案有所不同。

我在设置强制布局的大小时发现了：

networkViewerVariables.force = d3.layout.force()
        .gravity(.05)
        .distance(50)
        .charge(-50)
        .size([forceWidth, forceHeight])

“forceWidth”和“forceHeight”变量为空。当我填充这些时，错误就消失了。

希望对某人有所帮助:)

【讨论】：