我用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>
但是viz.js库是2.3 MB!那太大了。
是否可以对D3.js中的强制导向图做同样的事情?
答案 0 :(得分:0)
最终我决定自己编写图表代码,因为jsPlumb在某些方面与jQuery Mobile js和css发生冲突。在html5画布上绘制自己的绘图并不难,最终会得到一个“更轻”的应用程序。
结果如下: