更新D3强制布局 - 添加和删除节点损坏页面 [英] Updating D3 force layouts - adding and removing nodes corrupt the page

问题描述

首先向所有人道歉，有效地打开一个重复的问题到我的最后一个问题（ D3：node = vis.selectAll（.node）的问题），但最初我想我可以这样做，但jsfiddle，但它从来没有真正工作。

First of all apologies to all for effectively opening a duplicate question to my last one (D3: problems with node = vis.selectAll(".node")) but initially I thought I could do this would jsfiddle, however it never really worked.

这两个问题是一样的，所以它可能值得阅读另一个在这一个之前。

The two problems are the same, so it might be worth reading the other one before this one.

我有的问题是在更新力布局与新节点。实际上，我每隔几秒钟就会得到一个ajax调用来获取更新的数据，我有大量的代码来解析它，并计算出什么变化，以及添加新的节点到节点数组（创造性地称为nodeArray）和新链接到我的链接数组（称为linkArray）。我还通过将文本标签作为节点，也在nodeArray中，链接到linkArray中各自的节点，混淆了一些。

The issue I have is in updating the force layout with new nodes. In reality, I have an ajax call every few seconds to get updated data and I have reams of code to parse it and work out what changes, and either add new nodes to by node array (creatively called nodeArray) and new links to my link array (called linkArray). I also confuse things a bit by having text labels as nodes, also within nodeArray, with links to their respective node in linkArray.

这次不是尝试描述问题，我创建了两个接近相同的fiddles：

This time rather than try to describe the issue, I have created two near identical fiddles:

a）添加一个节点 - 这个小提琴解析原始数据，然后5秒后添加一个节点。
（ http://jsfiddle.net/zuzzy/dFd3H/2/ ）

a) adding a node - this fiddle parses the original data, then after 5 seconds adds a node. (http://jsfiddle.net/zuzzy/dFd3H/2/)

b）删除一个节点 - 这个小提琴解析原始数据，然后5秒钟后删除一个节点。
（ http://jsfiddle.net/zuzzy/wqS3G/1/ ）

b) removing a node - this fiddle parses the original data, then after 5 seconds removes a node. (http://jsfiddle.net/zuzzy/wqS3G/1/)

只需查找代码的以下部分：

Just look for the following parts of the code:

setTimeout(function () {
//update the objects

...

},5000);

//----- functions for drawing and tick below

function draw() {

....

}

我遇到的问题是复杂的方式。所有的例子我可以找到一个静态布局使用我喜欢的文本标签节点的想法，或者他们是动态的，但他们只是使用简单的节点与圆。我实际上使它比fiddles更难，因为不仅我使用圆和文本标签，而且我覆盖了一个图像在圆圈...但这只是太复杂的小提琴的例子。所以这些fiddles是我的代码的一个提取（这也需要intranet页面，所以不工作反正jsfiddle）如果它看起来复杂和设计，请道歉。

The issue I have is with the complicated way I am approaching this. All the examples I can find either have a static layout using the ideas I have used like text label nodes, or they are dynamic but they just use simple nodes with circles. I actually make it even harder than the fiddles because not only do I use circles and text labels but also I overlay an image over the circles...but that was just too complicated for the fiddle examples. So these fiddles are an extract of my code (which also requires intranet pages so doesnt work anyway on jsfiddle) so apologies if it looks convoluted and contrived.

我知道我有做错了，我怀疑（希望？）的问题的答案是相同的两个fiddles。

I know I have done it wrong, and I suspect (hope?) the answer to the problem is the same in both fiddles.

我也期望问题驻留在平局）function - 这里我觉得问题应该是因为，而不是遵循正常的创建一个节点对象，并与之交互公式我直接与svg对象（'vis'）交互。

I am also expecting that the issues resides in the draw() function - thats where I feel the issue should be because rather than follow the normal 'create a node object, and interact with that' formula I interact with the svg object ('vis') directly.

恼人的事情是fiddles工作罚款的初始绘制。这是更新打破了这两个。

The annoying thing is both fiddles work fine for the initial draw. it is the update that breaks both.

有任何建议吗？

感谢

- Chris

--Chris

推荐答案

我经过很多游戏后自己回答了。我修复了一个相当大的打字错误，在没有帮助只是在添加小提琴，我已经复制了一些来自for循环的文本，而不是替换循环中的变量（在setInterval，其中我添加节点

I have answered it myself after a lot of playing. I fixed a fairly major typo in the fiddle that wasn't helping in the add fiddle only, in that I had copied some text from a for loop and not replaced the variable in the loop (in the setInterval, where I add the node to the array)

node_hash[key] = a;

更改为

node_hash["REMOTE"] = a;

这实际上不是问题，并没有影响删除小提琴。我仍然不知道为什么它不工作之前，只提到vis，但我重做了fiddles，现在他们添加和删除罚款。

That actually wasn't the issue, and didn't affect the remove fiddle. I'm still not sure why it wasn't working before with just references to 'vis' but I reworked the fiddles and now they add and remove fine.

固定添加的小提示是 http://jsfiddle.net/zuzzy/fmkC5/5/

移除的固定小提琴是 http：/ / jsfiddle.net/zuzzy/wqS3G/3/

这篇关于更新D3强制布局 - 添加和删除节点损坏页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！