d3:制作一个静态有向图

Question

我想在d3中可视化20K节点依赖图.强制导向的图形(例如http://bl.ocks.org/mbostock/1153292)太慢而无法在浏览器中呈现此数量的节点.

基本上我想表示包含从一个节点到另一个节点的文本和有向边的节点,并添加缩放和平移功能.我怎样才能在d3中这样做？

Answer 1

您可以通过缩放行为基本上免费获得缩放行为(和平移).你必须自己做的布局 - 力布局几乎是D3中唯一可以用来布置这种图形的东西.

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

Answer 2

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

使用d3.js创建有向图的交互式工具

有向图创建者

操作方式：

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