d3：制作静态有向图

Posted 2023-02-22

【中文标题】d3：制作静态有向图

【英文标题】：d3: Make a static directed graph

【发布时间】：2013-10-23 17:17:09

【问题描述】：

我想在 d3 中可视化一个 20K 节点依赖图。对于这种数量的节点，http://bl.ocks.org/mbostock/1153292 等强制导向图在浏览器中渲染速度太慢。

基本上我想表示节点包含文本和从一个节点到另一个节点的有向边，并添加缩放和平移功能。我该如何在 d3 中执行此操作？

【参考方案1】：

您基本上可以通过zoom behaviour 免费获得缩放行为（和平移）。不过你必须自己做的布局——强制布局几乎是 D3 中唯一可以用来布局这种图表的东西。

无论您使用什么，对于 20K 节点，任何动态都会非常缓慢 - 简单地渲染所有元素将花费相当长的时间，在此期间浏览器似乎没有响应。您可能要考虑的另一种方法是使用更适合大量数据的东西预渲染图形，将结果保存为图像（甚至静态 SVG）并在顶部添加一点 D3 代码以进行缩放/平移.

【讨论】：

谢谢。如何在不使用强制布局的情况下使用 d3 生成与上图类似的静态有向图？

您必须自己计算布局。获得所有节点的位置后，绘制图形应该相当简单。

你有什么例子我可以看看如何做到这一点？

不在 D3 中，但您可能想看看 jsviz。

【参考方案2】：

这是一个似乎不使用强制布局节点的替代方案 - 没有弹跳，性能良好，并且内置了上传/下载功能。它的许可证是 MIT/X：

Interactive tool for creating directed graphs using d3.js

有向图创建者

操作：

拖动/滚动以平移/缩放图表 shift-click 图表以创建节点 按住 shift 键单击一个节点，然后拖动到另一个节点以将它们与有向边连接 按住 shift 键单击节点以更改其标题 单击节点或边并按退格/删除键删除