【发布时间】：2015-01-06 05:44:51
【问题描述】：
我正在尝试使用 d3 生成强制定向网络。 数据集是公司之间的联盟列表，如下所示：
[ { "company1":"微软", "company2":"高通公司" }, { "company1":"微软", "company2":"高通公司" },...]
可视化的主要特征包括：
- 双击节点（即公司）应展开/折叠其网络。 （展开的节点用蓝色表示，未展开的节点用灰色表示）。
- 将鼠标悬停在节点上会突出显示该节点及其伙伴。
- 折叠节点时，如果合作伙伴在屏幕上还有其他链接处于活动状态或已展开，则不应终止该链接并且不应删除该合作伙伴。
我的工作： 上面提到的所有功能
问题是什么： 目前，我正在刷新整个可视化并在每次添加或展开/折叠新节点时重新绘制它。在执行此操作时，一些节点会转到屏幕的左上角，并且我不断收到错误消息：
error: Invalid value for <g> attribute transform="translate(NaN,NaN)" d3.v3.min.js:1
Error: Invalid value for <line> attribute x2="NaN" d3.v3.min.js:1
Error: Invalid value for <line> attribute y2="NaN" d3.v3.min.js:1
Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"....
我已经提到了有关此问题的其他问题，但不幸的是，我无法理解为什么会在我的情况下发生这种情况。我观察到这种情况通常发生在屏幕上的当前节点仍在移动并且我在屏幕上添加/删除节点时。
这是当前工作代码的小提琴链接：http://jsfiddle.net/bmp7qnx0/4/
（我意识到“刷新”可视化不是正确的做法，我正在编写基于非重启实现的代码，并且也面临该代码的一些问题 - 我将发布小提琴链接如果很快需要，也一样）。 根据我目前对该问题的观察，我使用了 5 秒超时作为解决方法。
现在，如果有人可以参考我提供的小提琴并告诉我究竟是什么导致了错误，并且如果有某种方法可以使可视化工作而不破坏使用“重绘”逻辑，我将不胜感激它。
【问题讨论】：
标签： javascript svg d3.js force-layout graph-visualization