更新D3强制布局-添加和删除节点破坏页面

Updating D3 force layouts - adding and removing nodes corrupt the page

本文关键字:节点 删除 添加 D3 布局 更新      更新时间:2023-09-26

首先向所有人道歉,因为我有效地打开了一个重复的问题,我的最后一个(D3:问题与node = vis.selectAll(".node")),但最初我认为我可以这样做,但它从来没有真正工作。

这两个问题是一样的,所以在这个问题之前看另一个问题可能值得。

我遇到的问题是用新节点更新部队布局。实际上,我每隔几秒钟就有一个ajax调用来获取更新的数据,并且我有大量代码来解析它并找出更改的内容,或者向节点数组(创造性地称为nodeArray)添加新节点,或者向链接数组(称为linkArray)添加新链接。我还把文本标签作为节点,也在nodeArray中,在linkArray中链接到它们各自的节点,这让事情有点混乱。

这次我没有尝试描述这个问题,而是创建了两个几乎相同的fidle:

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

b)删除一个节点——这个小提琴解析原始数据,然后在5秒后删除一个节点。(http://jsfiddle.net/zuzzy/wqS3G/1/)

查找代码的以下部分:

setTimeout(function () {
//update the objects
...
},5000);
//----- functions for drawing and tick below
function draw() {
....
}

我遇到的问题是我处理这个问题的复杂方式。我能找到的所有例子要么是静态布局,使用我使用的文本标签节点,要么是动态的,但它们只是使用简单的圆圈节点。实际上,我让它比小提琴更难,因为我不仅使用圆圈和文本标签,而且还在圆圈上覆盖了图像……但这对于小提琴的例子来说太复杂了。因此,这些文件是我的代码的摘录(它也需要内部网页面,所以无论如何都不能在jsfiddle上工作),所以如果它看起来令人费解和做作,请道歉。

我知道我做错了,我怀疑(希望?)这两个问题的答案是一样的。

我也期望问题存在于draw()函数中-这是我觉得问题应该出现的地方,因为我不是遵循正常的"创建节点对象,并与之交互"公式,而是直接与svg对象('vis')交互。

令人讨厌的是这两把小提琴在最初的绘制中都工作得很好。这是一个破坏两者的更新。

有什么建议吗?

感谢

——克里斯。

我自己在玩了很多之后回答了这个问题。我修复了一个相当大的错字,在小提琴,没有帮助添加小提琴,只有,因为我已经复制了一些文本从for循环,而不是替换循环中的变量(在setInterval,我添加节点到数组)

node_hash[key] = a;

更改为

node_hash["REMOTE"] = a;

这实际上不是问题所在,也不影响移除小提琴。我仍然不确定为什么它之前没有工作,只是引用'vis',但我重新设计了小提琴,现在他们添加和删除很好。

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

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