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

我试图通过从 Zabbix API 获取数据来可视化服务器可用性（以及随后的其他事情，一旦可行）。您可以在 Zabbix API 文档中的 [此处][1] 中查看有关返回数据的示例。

获取数据不是问题，但我认为 d3.js 的数据连接遇到了一些问题，或者更确切地说我应该如何做到这一点。

获取数据后，我得到一组按字母顺序排序的服务器，我希望新的服务器出现，删除的服务器消失，可用性的任何变化（或其他 - 未来）以颜色或其他任何我想要的方式反映出来。可能会想到。

要点是图不应该重新初始化，它应该只是通过添加或删除节点来更新。

这是我遇到问题的一点。我已经设法将越来越多的节点添加到列表中（从不清除它），我已经设法让它们在每次获取新数据时“重绘”，即再次添加所有节点，并像它们一样捕捉到中心首先在加载页面时执行。

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

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

我现在有点不确定我做错了什么，我正在看this这似乎与我需要的相当接近，无论如何都没有链接（目前）。这工作得很好，我试图在我的代码中复制这种行为，但它不起作用。

如果有人给我一些指示，我将不胜感激，那就太好了。过去一周我在工作中一直在玩这个，但没有进一步:)

Thanks!

因为我只能在工作中访问 Zabbix，所以我实际上只能在 CET 时间 16-21 时间段内进行测试，即今天大约还有 4~ 个小时。如果有人在晚上有任何建议，我明天会尝试一下：D

我在 GitHub 上的代码将位于我的帖子下方的链接中，因为该网站缺乏声誉使我陷入了一个灰暗的困境，我只能在我的帖子中添加两个链接。

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

Edit:

仍然有问题，每次刷新数据时，圆圈都会“输入”，就像您第一次加载时一样：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 行的情况并不罕见）。

希望能帮助到你。