javascript - 具有展开和折叠功能的强制定向图 (d3.js)

Question

我正在尝试使用 d3 生成强制定向网络。数据集是公司之间的联盟列表，如下所示:

[ { "company1":"微软", "company2":"高通公司" }, { "company1":"微软", "company2":"高通公司" },...]

可视化的主要功能包括:

1. 双击节点(即公司)应展开/折叠其网络。 (展开的节点用蓝色表示，未展开的节点用灰色表示)。
2. 将鼠标悬停在节点上会突出显示该节点及其合作伙伴。
3. 折叠节点时，如果合作伙伴在屏幕上有其他事件链接或已展开，则不应终止该链接，也不应删除该合作伙伴。

我正在做的事情:上面提到的所有功能

问题是什么:目前，我正在刷新整个可视化，并在每次添加或展开/折叠新节点时重新绘制它。执行此操作时，某些节点会转到屏幕的左上角，并且我不断收到错误:

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)"....

我已经提到了与此问题相关的其他问题，但不幸的是我无法理解为什么在我的情况下会发生这种情况。我观察到，当屏幕上的当前节点仍在移动并且我在屏幕上添加/删除节点时，通常会发生这种情况。

这是当前工作代码的 fiddle 链接:http://jsfiddle.net/bmp7qnx0/4/

(我意识到“刷新”可视化并不是正确的方法，我正在研究基于非重新启动的实现的代码，并且也面临着该代码的一些问题 - 我将发布 fiddle 链接如果很快需要，则相同)。根据我目前对此问题的观察，我使用了 5 秒超时作为解决方法。

现在，如果有人可以引用我提供的 fiddle 并告诉我到底是什么导致了错误，并且如果有某种方法可以使可视化工作而不破坏使用“重新绘制”逻辑，我将非常感激它。

Answer 1

解决方案:

以防万一这可以帮助遇到类似问题的人:当我加载新节点/链接时，我正在重新使用我的强制布局对象。事实证明滴答计时器仍在触发。加载新数据时调用force.stop()将其关闭修复了问题。