d3：制作一个静态有向图

Question

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

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

Answer 1

您可以通过zoom behaviour免费获得缩放行为（和平移）。你必须自己做的布局 - 力布局几乎是D3中唯一可以用来布置这种图形的东西。

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

Answer 2

这是一种替代方案，它似乎没有使用武力来布置节点 - 没有弹跳，表现良好，并且内置了上传/下载功能。它的许可证是麻省理工学院/ X：

Interactive tool for creating directed graphs using d3.js

  

向图创造者

     

操作：

     

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

Answer 3

您可以使用force.start，force.tick，force.stop生成不带动画的静态有向图。这是一个例子：

http://vida.io/documents/fGzpzjP98Bs2ShMHW

仅使用静态图表加载20K节点可能会出现性能问题。您可以保存图表，然后在不进行d3计算的情况下加载它。