JavaScriptでGraphvizを使う方法についてまとめます。
基本
HTMLで書いたときの全体です。
このままコピペして拡張子を.htmlに保存して開くと描画されるはずです。
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id="graph0"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.1/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script>
<script>
dotstr = "digraph{a->b;b->c;b->d;}";
d3.select("#graph0").graphviz()
.fade(false)
.renderDot(dotstr);
</script>
</body>
<meta charset="utf-8">
<body>
<div id="graph0"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.1/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script>
<script>
dotstr = "digraph{a->b;b->c;b->d;}";
d3.select("#graph0").graphviz()
.fade(false)
.renderDot(dotstr);
</script>
</body>
応用
日本語も使えます。クォートで挟む必要がありません。
なお、JavaScriptの機能として、下の通り「`」で挟むと改行できます。
<div id="graph1"></div>
<script>
d3.select("#graph1").graphviz()
.fade(false)
.renderDot(`graph{
新宿--八王子[color=orange];
新宿--調布--八王子[color=navy];
調布--多摩センター--橋本[color=navy];
町田--橋本--八王子[color=green];
新宿--新百合ヶ丘--町田[color=red];
新百合ヶ丘--多摩センター[color=red]}`
);
</script>
<script>
d3.select("#graph1").graphviz()
.fade(false)
.renderDot(`graph{
新宿--八王子[color=orange];
新宿--調布--八王子[color=navy];
調布--多摩センター--橋本[color=navy];
町田--橋本--八王子[color=green];
新宿--新百合ヶ丘--町田[color=red];
新百合ヶ丘--多摩センター[color=red]}`
);
</script>
コメント