使用d3.js添加和删除强制布局中的节点的问题 [英] Problems adding and removing nodes in a force-layout using d3.js
问题描述
我试图通过从Zabbix API获取数据来可视化服务器可用性（以及其他一些事情，一旦这样做）。您可以在Zabbix API文档中查看如何返回数据的示例，如[here] [1]。
获取数据不是问题，但我对我有用[0]丢个板砖[0]引用举报我来说两句（0）我想要新的服务器出现，删除只是消失，任何可用性的变化（或在其他情况下，在将来）反映与颜色或任何我可能想到的。
关键是图形不应该重新初始化，它应该只是通过添加或删除节点来更新。
这是位I我有问题。我已经设法添加越来越多的节点到列表（从来没有清除它），我已经设法让他们重绘每次我获取新的数据，即所有的节点被再次添加，并捕捉到中心像他们
第三个导致所有节点都在左上角。
后面这是我的代码的当前状态。
我有点不确定我在这里做错了，我在看这，这似乎相当接近我需要，没有链接反正（现在）。这工作正常，我试图在我的代码复制这种行为，但它不工作。
我会感激，如果有人有一些指针为我， 那将是真棒。我已经在过去一周的工作中玩这个了，而没有更多的：）
谢谢！
因为我只能在工作中访问Zabbix，我真的只能在16-21时间段CET时间测试的东西，这是今天约另外4小时。如果有人在晚上有任何建议，我会明天试试：D
我的代码在GitHub将在我的帖子下面的链接，因为缺乏声誉这个网站让我在一个阴沉的洞，我只能添加两个链接到我的帖子。
为什么不是全球性的？我在其他SE网站上有超过10个代表。
编辑：
仍然有问题，每次数据刷新时，圆圈输入，就像他们第一次加载时一样： http://mbostock.github.com/d3/talk/20111018/collision.html
现在不知道该怎么办：/
你提到的是D3的默认行为。当您添加节点时，它们将被插入到左上角。您可以通过编写自己的放置方法并在将每个节点添加到强制定向图时直接设置X和Y来更改此行为。
诀窍是应用此算法：
1）计算视口的限制的绘图区域 - 20），并使用来自强制定向绑定示例的小技巧（ http://bl.ocks.org / 1129492 ）
2）然后对每个可视化节点执行以下操作：计算在视口中保存节点的力
3）保持节点在视口中的算法将是沿着这些线的东西：
每个节点根据可以应用在4个方向上的力计算X和Y（左上，左下，右上角，右下角） - 如果它靠近左上角，那么你将相应地设置X和Y ....反正它不会在屏幕外面....
<另一个技巧是在中心设置根节点（见这篇文章：如何在D3.js强制导向图中设置焦点节点？）。这将有助于稳定你的图表。另一个建议是尝试不要混合ajax调用与重绘。理想情况下，在加载数据时使用一些回调函数并调用重绘，否则最终会得到意大利代码（强制定向图大于1000行并不罕见）。
希望它有帮助。
I am trying to visualize the server availability (and later other things, once this works) by fetching data from the Zabbix API. You can see an example on how the data returned looks like [here][1] in the Zabbix API Documentation.
Getting the data is not the problem, but I am having some trouble with d3.js's data joining I think, or rather how I am supposed to do this.
After fetching the data I get a array of servers sorted alphabetically, and I want the new servers to appear, the ones removed to just disappear and any changes in availability (or otherwise - in the future) to be reflected with color or whatever else I might think of.
The point is that the graph shouldn't re-initialize, it should just be updated by adding or removing nodes.
Which is the bit I am having problems with. I have managed to add more and more nodes to the list (never clearing it), I have managed to get them to "redraw" each time I fetch new data, i.e all the nodes are added again, and snap to the center like they first do when you load the page.
And the third which has resulted in all the nodes being stuck in the top left corner.
The latter which is the current state of my code.
I am a bit unsure what I am doing wrong at this point, I was looking at this which seems to be fairly close to what I need, without the links anyway (for now). That works fine, and I've tried to replicate that behavior in my code, - yet it does not work.
I would appreciate it if someone had some pointers for me, that would be awesome. I have been playing with this at work for the past week without getting much further :)
Thanks!
Because I only have access to Zabbix at work I am really only able to test things in the 16-21 time period CET time, which is for about another 4~ hours today. If anyone have any suggestions during the night I will try it out tomorrow :D
My code on GitHub will be in a link below my post, since this lack of reputation on this site has put me in a gloomy hole where I can only add two links to my post.
Why isn't this global? I have more than 10 rep on other SE sites..
Edit:
Still having trouble, every time the data is refreshed the circles "enter" like they do when you first load this: http://mbostock.github.com/d3/talk/20111018/collision.html No idea what to do now :/
What you mention in there is the default behaviour of D3. When you add nodes they will be inserted in the upper left corner. You can change this behaviour by writing your own placement method and directly setting the X and Y of each node when you add it to your force directed graph.
The trick is to apply this algorithm:
1) calculate the limits of the viewport (say the limits of your drawing area - 20) and use the tricks from the force directed bound example ( http://bl.ocks.org/1129492 )
2) then for each visualization tick do this: calculate forces to keep nodes in viewport
3) the algorithm to keep node in viewport would be something along these lines: for each node calculate X and Y according to the forces that can be applied on the 4 directions (top left, bottom left, top right, bottom right) - if it's closer to upper left then you will set X and Y accordingly....anyway it will not be outside the screen....
Another trick would be to set up the root node in the center (see this post: How do I set the focal node in a D3.js Force Directed Graph?). That would help stabilize your graph. Another advice would be to try to not mix ajax calls with your redraws. Ideally use some callbacks and call redraw when data is loaded, otherwise you will end up with spaghetti code (it's not unusual for force directed graphs to be larger than 1000 lines).
Hope it helps.
这篇关于使用d3.js添加和删除强制布局中的节点的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
