1

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

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

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

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

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

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

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

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

如果有人对我有一些指示，我将不胜感激，那将是很棒的。过去一周我在工作中一直在玩这个，但没有进一步了解:)

谢谢！

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

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

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

编辑：

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

4

1 回答 1

1

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

诀窍是应用这个算法：

1）计算视口的限制（比如绘图区域的限制 - 20）并使用力定向绑定示例（http://bl.ocks.org/1129492）中的技巧

2）然后对于每个可视化刻度执行以下操作：计算力以将节点保持在视口中

3) 将节点保留在视口中的算法将遵循以下原则：对于每个节点，根据可应用于 4 个方向（左上、左下、右上、右下）的力计算 X 和 Y - 如果它更靠近左上角，然后您将相应地设置 X 和 Y....无论如何它不会在屏幕之外....

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

希望能帮助到你。

于 2012-06-26T18:06:02.520 回答