如何在 D3.js 中用力导向图做这个图？答案

【问题标题】：How to do thIs diagram with force-directed graph in D3.js?如何在 D3.js 中用力导向图做这个图？
【发布时间】：2013-08-01 06:21:11
【问题描述】：

我用 viz.js 制作了这张图。

点代码很简单：

<script type="text/vnd.graphviz" id="myDiagram">
digraph G {
graph [ 
    fontname = "Arial",
    fontsize = 18,
    label = "Digest Email Flow Chart",
    size = "4,4" ];

node [  
    shape = ellipse,
    sides = 4,
    distortion = "0.0",
    orientation = "0.0",
    skew = "0.0",
    bgcolor = lightgray,
    style = filled,
    fontname = "Arial" ];

"Email Notification"   [shape=ellipse, shape = "Mrecord" label="Digest Email\n(scheduled)"];
"Sentiment Analysis"   [shape=ellipse, shape = "Mrecord" label="Sentiment Analysis\n(triggered)"];
"Google News"          [shape=ellipse, shape = "Mrecord" label="Google News\n(scheduled)"];
"Dilbert Daily Comics" [shape=ellipse, shape = "Mrecord" label="Dilbert Daily Comics\n(scheduled)"];
"Time Series Chart"    [shape=ellipse, shape = "Mrecord" label="Time Series Chart\n(triggered)"];
"Twitter Stream"       [shape=ellipse, shape = "Mrecord" label="Twitter Stream\n(scheduled)"];

"Email Notification" -> "Time Series Chart" [dir = "back"];
"Email Notification" -> "Dilbert Daily Comics" [dir = "back"];
"Time Series Chart"  -> "Twitter Stream" [dir = "back"];
"Sentiment Analysis" -> "Google News" [dir = "back"];
"Email Notification" -> "Sentiment Analysis" [dir = "back"];
}
</script>

但是 viz.js 库是 2.3 MB！太大了。

是否可以对 D3.js 中的力导向图之类的东西做同样的事情？

【问题讨论】：

在这种情况下，您不需要强制定向布局——您正在寻找可以静态计算该布局的东西。在 D3 中开箱即用，没有什么可以为您做到这一点。
感谢您的建议。我决定去 jsPlumb。该 API 有很好的文档记录，您可以使用预定义的 DIV 和固定的节点位置。

标签： graph d3.js directed-graph force-layout

【解决方案1】：

最终我决定自己编写图表代码，因为 jsPlumb 在某些方面与 jQuery Mobile js 和 css 发生冲突。在 html5 画布上进行自己的绘图并不难，您最终会得到一个“更轻”的应用程序。

这是结果：

Link to chart

【讨论】：