■ はじめに
https://dk521123.hatenablog.com/entry/2023/06/15/004815
https://dk521123.hatenablog.com/entry/2023/06/16/000531
で、度々登場したDOT言語のPlayground (graphviz-visual-editor) を使ってm各DOTの移り変わりをアニメーション化して 表示させようって話が業務ででた。 しかし、graphviz-visual-editorをおとしてきて、使用を試みたが 起動できなった。 そこで、別案として、d3-graphviz ってのがあったので、調べてみた。
目次
【1】d3-graphviz 1)補足:D3について 【2】サンプル 例1:Hello world 例2:ファイル読み込み表示する 例3:アニメーション化 例4:ボタン押下で、アニメーション表示 【3】おまけ:graphviz-visual-editorの導入撤退について 1)graphviz-visual-editor 2)撤退理由
【1】d3-graphviz
* D3ベースのDOT言語をビジュアル表示してくれるJavaScript製Webツール
https://github.com/magjac/d3-graphviz
https://www.npmjs.com/package/d3-graphviz
1)補足:D3について
* 以下の関連記事を参照のこと
D3.js ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2015/10/07/000426
【2】サンプル
例1:Hello world
<!DOCTYPE html> <html> <head> <title>Hello world!</title> </head> <meta charset="utf-8"> <body> <script src="https://d3js.org/d3.v5.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.1.0/build/d3-graphviz.min.js"></script> <div id="graph" style="text-align: center;"></div> <script> var graphviz = d3.select("#graph").graphviz(); graphviz.renderDot('digraph {a -> b}'); </script> </body> </html>
例2:例2:ファイル読み込み表示する
<!DOCTYPE html> <html> <head> <title>Hello world</title> </head> <body> <form> <input id="testFile" type="file" name="file"><br> <textarea id="textArea" name="txt" rows="5" cols="20"></textarea> </form> <br> <div id="graph" style="text-align: center;"></div> <script> let input = document.getElementById('testFile'); input.addEventListener('change', () => { for(file of input.files){ loadFile(file); } }); let graphviz = d3.select("#graph").graphviz(); async function loadFile(file) { let text = await file.text(); document.getElementById("textArea").value = text; graphviz.renderDot(text); } </script> </body> </html>
input.dot
digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b -> c; }
例3:アニメーション化
https://gist.github.com/magjac/4acffdb3afbc4f71b448a210b5060bca
<!DOCTYPE html> <html> <meta charset="utf-8"> <body> <script src="https://d3js.org/d3.v5.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.1.0/build/d3-graphviz.min.js"></script> <div id="graph" style="text-align: center;"></div> <script> var dotIndex = 0; var graphviz = d3.select("#graph").graphviz() .transition(function () { return d3.transition("main") .ease(d3.easeLinear) .delay(500) .duration(1500); }) .logEvents(true) .on("initEnd", render); function render() { var dotLines = dots[dotIndex]; var dot = dotLines.join(''); graphviz .renderDot(dot) .on("end", function () { dotIndex = (dotIndex + 1) % dots.length; render(); }); } var dots = [ [` digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b; } `] ,[` digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b -> c; } `] ,[` digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b -> c -> d; } `] ,[` digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b -> c -> d -> e; } `] ]; </script> </body> </html>
例4:ボタン押下で、アニメーション表示
ちなみにだが、以下の関連記事の 「例2:フォルダ内のファイルを全て読み込んでHTMLファイルを作る」 に外部のDOTファイルを取り込んで、以下のHTMLファイルを作成する ツールを作った
https://dk521123.hatenablog.com/entry/2022/02/23/000000
<!DOCTYPE html> <html> <meta charset="utf-8"> <body> <script src="https://d3js.org/d3.v5.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.1.0/build/d3-graphviz.min.js"></script> <style> .styled { border: 0; line-height: 2.0; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(255,0,0,0.3); background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0)); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } </style> <button id="next" class="favorite styled" onclick="showDot(1)"> Next </button> <button id="previous" class="favorite styled" onclick="showDot(-1)"> Previous </button> <form> <textarea id="textArea" name="txt" rows="10" cols="100"></textarea> </form> <div id="graph" style="text-align: center;"></div> </div> <script> var dots = [ ` digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b; } ` ,` digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b -> c; } ` ,` digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b -> c -> d; } ` ,` digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b -> c -> d -> e; } ` ]; var dotIndex = -1; var graphviz = d3.select("#graph").graphviz() .transition(function () { return d3.transition("main") .ease(d3.easeBounceOut) .delay(500) .duration(1000); }) .logEvents(true); function showDot(val) { dotIndex = (dotIndex + (val)) % dots.length; if (dotIndex < 0) { dotIndex = dots.length -1; } var dot = dots[dotIndex]; document.getElementById("textArea").value = dot; graphviz.renderDot(dot); } </script> </body> </html>
【3】おまけ:graphviz-visual-editorの導入撤退について
1)graphviz-visual-editor
* DOT言語を表示してくれるJavaScript製のツール => 以下、Web上に展開されているPlayground で アニメーション化もされていていい感じ。
Playground
http://magjac.com/graphviz-visual-editor/
2)撤退理由
以下のREADMEを見ながら、以下の手順で導入を試みたが 依存関係部分でエラーが出まくって、解決を試みたが 無理すぎて諦めた。。。
https://github.com/magjac/graphviz-visual-editor#installation
# より抜粋 git clone https://github.com/magjac/graphviz-visual-editor cd graphviz-visual-editor npm install # ★ここでエラー make # 無視して実行してもエラー npm run start # 更に無視して実行してもエラー
参考文献
https://qiita.com/mmmmk/items/f7c70024938b0e38e4c9
https://www.halu7.com/entry/d3-graphviz
https://puarts.com/?pid=1775
関連記事
DOT言語 ~ 基礎知識編 ~
https://dk521123.hatenablog.com/entry/2023/06/15/004815
DOT言語 ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2023/06/16/000531
Python + DOT言語で図作成するには
https://dk521123.hatenablog.com/entry/2023/06/14/174104
Python で d3-graphviz を使ってアニメーション表示ツールを作る
https://dk521123.hatenablog.com/entry/2023/06/24/000000
sqlparser-rs ~ SQL Parser for Rust ~
https://dk521123.hatenablog.com/entry/2023/06/12/000000
D3.js ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2015/10/07/000426
D3.js ~ アニメーション表示する ~
https://dk521123.hatenablog.com/entry/2015/10/24/111832
JavaScript での ファイルの読み書き
https://dk521123.hatenablog.com/entry/2023/01/19/000000
Python ~ 基本編 / パス情報抽出 ~
https://dk521123.hatenablog.com/entry/2022/02/23/000000
Python ~ 基本編 / ファイル読込・書込 ~
https://dk521123.hatenablog.com/entry/2019/10/07/000000
HTML ~ SVG要素 ~
https://dk521123.hatenablog.com/entry/2015/10/16/232500
jq コマンド ~ コマンドで JSON を扱う ~
https://dk521123.hatenablog.com/entry/2020/02/01/000000