d3-graphviz でグラフ更新する簡易サンプル

2022/07/21
(この記事の文字数: 148)

d3-graphvizを使ってグラフを更新する簡易サンプルです。

以下がサンプルです。dotソースを書き換えて更新ボタンを押すとグラフが更新されます。

a -> b; b -> c; a -> d;

以下がサンプルのソースです。viz.js 等は CDN 版を利用しているので、コピペで動作すると思います。


<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.2/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script>
<p>
    <textarea id="dotSourceArea" style="width: 100%;height: 200px;">
a -> b;
b -> c;
a -> d;
    </textarea>
</p>
<p>
    <input type="button" value="グラフ更新" onclick="updateGraph()" style="width:100%" />
</p>
<div id="graph" style="text-align: center;border: 1px solid"></div>
<script>

    function updateGraph() {
        let textArea = document.getElementById('dotSourceArea');
        let dotSource = textArea.value;
        d3.select("#graph").graphviz()
            .fade(false)
            .zoom(false)
            .renderDot(`digraph G { ${dotSource} }`);
    }
    updateGraph();
</script>