D3 交互式图表 - 使用来自服务器的新数据更新图表

Question

我想像这样更新 D3（或其他一般可视化库）中的图表：

1. 用户点击一个项目，例如图的一个节点
2. 服务器返回新数据
3. 使用新数据，将新边和节点附加到旧图
4. 可能会更改某些旧节点的属性，例如将下图中的“B”变为红色。

如图所示：

我的问题是：如何做到这一点？采用什么技术和哪些步骤？我在另一个关于实时更新的问题中看到您可以使用 WebSocket。但就我而言，它不是实时更新。那么 WebSocket 仍然是正确的选择，还是有更好的选择，比如 AJAX？

谢谢！

Answer 1

如果您只想更新用户驱动事件的图表，例如单击悬停等，那么使用 websockets 将是一种矫枉过正。 WebSockets 用于向客户端发送数据，当客户端可能不知道何时更新并且服务器拥有该信息时。

例如。如果您还想更新另一个人的图表，当某人在 Google Docs 上更新他的图表时，您需要使用 WebSockets。

否则，如果是单页需求，您可以使用 jQuery。如果你有一个更大的项目，你可以使用 angular，它也为 D3 提供了很好的数据绑定。但是，是的，您基本上选择 AJAX 调用而不是 WebSockets。