Graph 如何在D3.js中使用力定向图绘制此图？

我用viz.js制作了这个图

Dot代码非常简单：

<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>

有向图G{
图[
fontname=“Arial”，
fontsize=18，
label=“摘要电子邮件流程图”，
size=“4,4”]；
节点[
形状=椭圆，
边=4，
失真=“0.0”，
方向=“0.0”，
skew=“0.0”，
bgcolor=浅灰色，
样式=填充，
fontname=“Arial”]；
“电子邮件通知”[shape=ellipse，shape=“Mrecord”label=“摘要电子邮件\n（预定）”；
“情绪分析”[shape=eliple，shape=“Mrecord”label=“情绪分析\n（已触发）”；
“谷歌新闻”[shape=ellipse，shape=“Mrecord”label=“谷歌新闻（预定）”；
“Dilbert Daily Comics”[shape=ellipse，shape=“Mrecord”label=“Dilbert Daily Comics\n（预定）”；
“时间序列图”[shape=ellipse，shape=“Mrecord”label=“时间序列图\n（已触发）”；
“推特流”[shape=ellipse，shape=“Mrecord”label=“推特流\n（预定）”；
“电子邮件通知”->“时间序列图”[dir=“back”]；
“电子邮件通知”->“迪尔伯特每日漫画”[dir=“back”]；
“时间序列图”->“推特流”[dir=“back”]；
“情绪分析”->“谷歌新闻”[dir=“back”]；
“电子邮件通知”->“情绪分析”[dir=“back”]；
}

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

---

是否可以在D3.js中使用类似于力定向图的图形？

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

结果如下：

---

在本例中，力导向布局不是您所需要的——您正在寻找静态计算该布局的东西。在D3中，没有任何东西可以为您做到这一点。谢谢您的建议。我已决定去参加一个聚会。API有很好的文档记录，并且它是一个很好的奖励，您可以使用预定义的div和固定位置的节点。