2

この図は 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 の強制指向グラフのようなもので同じことを行うことは可能ですか?

4

1 に答える 1

0

最終的には、jsPlumb が jQuery Mobile の js および css といくつかの領域で競合したため、グラフ作成コードを自分で作成することにしました。html5 キャンバスで独自の描画を行うのは難しくなく、最終的には「より軽い」アプリになります。

この結果：

チャートへのリンク

于 2013-08-09T05:40:20.063 に答える