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

Question

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

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

获取数据后，我得到了一个按字母顺序排序的服务器数组，我希望新的服务器出现，被删除的服务器会消失，可用性的任何变化（或者将来）都会用颜色或不管我能想到什么。

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

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

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

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

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

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

谢谢！

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

我在 GitHub 上的代码将在我的帖子下方的链接中，因为这个网站上缺乏声誉让我陷入了一个阴暗的洞，我只能在我的帖子中添加两个链接。

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

编辑：

仍然遇到问题，每次刷新数据时，圆圈都会像您第一次加载时一样“输入”：http://mbostock.github.com/d3/talk/20111018/collision.html 不知道现在该怎么办：/

Answer 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 调用与重绘混合。理想情况下，在加载数据时使用一些回调并调用 redraw，否则您将得到意大利面条式代码（强制有向图大于 1000 行并不罕见）。

希望对您有所帮助。