javascript d3：制作静态有向图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19389063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3: Make a static directed graph
提问by alste
I'd like to visualize a 20K node dependency graph in d3. Force-directed graphs such as http://bl.ocks.org/mbostock/1153292are too slow to render in the browser for this number of nodes.
我想在 d3 中可视化一个 20K 节点依赖图。对于这种数量的节点，诸如http://bl.ocks.org/mbostock/1153292 之类的力导向图太慢而无法在浏览器中呈现。
Basically I want to represent nodes containing textand directed edges from one node to another, and add zooming and panning functionality. How can I go about doing this in d3?
基本上我想表示包含文本和从一个节点到另一个节点的有向边的节点，并添加缩放和平移功能。我怎样才能在 d3 中做到这一点？
回答by Lars Kotthoff
The zoom behaviour (and pan) you would get basically for free through the zoom behaviour. The layout you would have to do yourself though -- the force layout is pretty much the only thing in D3 you can use to lay out a graph of this kind.
您可以通过缩放行为基本上免费获得缩放行为（和平移）。不过，您必须自己完成布局——力布局几乎是 D3 中唯一可以用来布置此类图形的东西。
Regardless of what you're using, with 20K nodes anything dynamic is going to be pretty slow -- simply rendering all the elements is going to take quite some time during which the browser will seem unresponsive. An alternative you may want to consider is to pre-render the graph using something more suitable for large amounts of data, save the result as an image (or even static SVG) and add a little bit of D3 code on top for zoom/pan.
无论您使用什么，对于 20K 节点，任何动态都会非常缓慢——简单地渲染所有元素将花费相当长的时间，在此期间浏览器似乎没有响应。您可能要考虑的另一种方法是使用更适合大量数据的东西预渲染图形，将结果保存为图像（甚至静态 SVG）并在顶部添加一点 D3 代码以进行缩放/平移.
回答by ptim
Here's an alternative which doesn't seem to use force to lay out the nodes - there's no springing, performs well, and has built in upload/download facility. Its license is MIT/X:
这是一个似乎不使用强制来布置节点的替代方案 - 没有弹性，性能良好，并且内置了上传/下载功能。它的许可证是 MIT/X：
Interactive tool for creating directed graphs using d3.js
directed-graph-creator
Operation:
- drag/scroll to translate/zoom the graph
- shift-click on graph to create a node
- shift-click on a node and then drag to another node to connect them with a directed edge
- shift-click on a node to change its title
- click on node or edge and press backspace/delete to delete
有向图创建者
手术：
- 拖动/滚动以平移/缩放图形
- 按住 shift 键单击图形以创建节点
- 按住 shift 键单击一个节点，然后拖动到另一个节点以将它们与有向边连接起来
- 按住 shift 单击节点以更改其标题
- 单击节点或边并按退格键/删除键删除
