使用d3.js在强制布局中添加和删除节点时出现问题

时间:2012-06-26 14:41:43

标签: javascript d3.js zabbix force-layout

我试图通过从Zabbix API获取数据来可视化服务器可用性(以及后来的其他事情,一旦这样做)。您可以在Zabbix API文档中看到返回数据的示例如[here] [1]。

获取数据不是问题,但我认为d3.js的数据加入时遇到了一些问题,或者说我应该怎么做。

获取数据后,我得到一组按字母顺序排序的服务器,我希望新的服务器出现,删除的服务器只是消失,可用性的任何变化(或其他 - 将来)都会用颜色或无论我想到什么。

重点是图表不应该重新初始化,只需通过添加或删除节点来更新。

我遇到的问题是哪一点。我已设法在列表中添加越来越多的节点(从不清除它),我已设法让它们重新绘制"重绘"每次我获取新数据,即再次添加所有节点,并像加载页面时一样按照中心进行捕捉。

第三个导致所有节点卡在左上角。

后者是我代码的当前状态。

我有点不确定我在这一点上做错了什么,我看着this这似乎与我需要的相当接近,但是没有链接(现在)。这很好用,我试图在我的代码中复制这种行为,但它不起作用。

如果有人为我提供了一些指示,我将不胜感激,那将是非常棒的。过去一周我一直在玩这个工作而没有进一步深入探讨:)

谢谢!

因为我只能在工作中访问Zabbix,所以我真的只能在16-21时间段的CET时间内测试一些东西,今天大约需要4到几个小时。如果有人在晚上有任何建议我会在明天试一试:D

我在GitHub上的代码将在我的帖子下方的链接中,因为这个网站上缺乏声誉让我陷入了一个令人沮丧的漏洞,我只能添加两个链接到我的帖子。

为什么这不是全球性的?我在其他SE网站上有超过10个代表..

修改

仍有问题,每次刷新数据时,圈子都会输入"就像你第一次加载它时一样:http://mbostock.github.com/d3/talk/20111018/collision.html 不知道现在该做什么:/

1 个答案:

答案 0 :(得分:1)

你提到的是D3的默认行为。添加节点时,它们将插入左上角。您可以通过编写自己的放置方法并在将每个节点添加到强制有向图时直接设置每个节点的X和Y来更改此行为。

诀窍是应用此算法:

1)计算视口的极限(比如绘图区域的极限 - 20)并使用力导向边界示例中的技巧(http://bl.ocks.org/1129492

2)然后对于每个可视化标记,执行以下操作:计算力以保持视口中的节点

3)将节点保存在视口中的算法将是以下几点: 对于每个节点,根据可以应用于4个方向(左上角,左下角,右上角,右下角)的力来计算X和Y - 如果它更接近左上角那么你将设置X和Y因此......无论如何它不会出现在屏幕之外......

另一个技巧是在中心设置根节点(参见这篇文章:How do I set the focal node in a D3.js Force Directed Graph?)。这有助于稳定您的图表。另一个建议是尝试不将ajax调用与重绘混合。理想情况下,在加载数据时使用一些回调并调用重绘,否则最终会得到意大利面条代码(强制定向图大于1000行并不罕见)。

希望它有所帮助。