2013-07-31 64 views
2

我用viz.js制作了这个图。如何在D3.js中使用强制定向图表创建图表?

enter image description here

点代码非常简单:

<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中的强制定向图那样执行相同的操作?

+0

的力导向布局是不是你在这种情况下所需要的 - 你正在寻找的东西,计算该布局静态。在D3中没有任何东西会为你开箱。 –

+0

谢谢你的建议。我决定去jsPlumb。这个API有很好的文档记录,这是一个很好的奖励,你可以使用预定义的DIV和节点的固定位置。 – user1707810

回答

0

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

这个结果:

Link to chart