Question

我正在尝试使用d3生成一个Force Directed网络。 数据集是公司之间的联盟列表，如下所示：

[ { “公司1”：“微软”， “company2”：“Qualcomm Inc.” }， { “公司1”：“微软”， “company2”：“Qualcomm Inc.” }，...]

可视化的主要功能包括：

双击节点（即公司）应该展开/折叠其网络。（扩展节点由蓝色和非扩展节点以灰色表示。）
将鼠标悬停在某个节点上会突出显示该节点及其合作伙伴。
折叠节点时，如果合作伙伴在屏幕上激活了其他链接或展开了其他链接，则不应终止该链接，也不应删除该合作伙伴。

我的工作： 上面提到的所有功能

问题：目前，每次添加或展开/折叠新节点时，我都会刷新整个可视化并重新绘制它。执行此操作时，某些节点会转到屏幕的左上角，但我一直收到错误：

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秒的超时作为解决方法。

现在，如果有人可以参考我提供的小提琴并告诉我究竟是什么导致了错误，并且如果有一些方法可以使可视化工作而不打破使用“重新绘制”逻辑，我会非常感激它

Answer 1

解决方案：

以防这可以帮助任何碰到类似问题的人：当我加载新节点/链接时，我正在重新使用我的强制布局对象。事实证明，滴答计时器仍在开火。在加载新数据时调用force.stop（）将其关闭可以解决问题。

带有展开和折叠的强制定向图（d3.js）

1 个答案: