■ はじめに

https://dk521123.hatenablog.com/entry/2023/06/15/004815
https://dk521123.hatenablog.com/entry/2023/06/16/000531

で、度々登場したDOT言語のPlayground （graphviz-visual-editor）
を使ってｍ各DOTの移り変わりをアニメーション化して
表示させようって話が業務ででた。
しかし、graphviz-visual-editorをおとしてきて、使用を試みたが
起動できなった。
そこで、別案として、d3-graphviz ってのがあったので、調べてみた。

【１】d3-graphviz
　１）補足：D3について
【２】サンプル
　例１：Hello world
　例２：ファイル読み込み表示する
　例３：アニメーション化
　例４：ボタン押下で、アニメーション表示
【３】おまけ：graphviz-visual-editorの導入撤退について
　１）graphviz-visual-editor
　２）撤退理由

【１】d3-graphviz

* D3ベースのDOT言語をビジュアル表示してくれるJavaScript製Webツール

https://github.com/magjac/d3-graphviz
https://www.npmjs.com/package/d3-graphviz

１）補足：D3について

* 以下の関連記事を参照のこと

D3.js ～入門編～
https://dk521123.hatenablog.com/entry/2015/10/07/000426

【２】サンプル

例１：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>

例２：例２：ファイル読み込み表示する

<!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;
}

例３：アニメーション化

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>

例４：ボタン押下で、アニメーション表示

 ちなみにだが、以下の関連記事の
「例２：フォルダ内のファイルを全て読み込んで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>

【３】おまけ：graphviz-visual-editorの導入撤退について

１）graphviz-visual-editor

* DOT言語を表示してくれるJavaScript製のツール
 => 以下、Web上に展開されているPlayground で
　　アニメーション化もされていていい感じ。

Playground
http://magjac.com/graphviz-visual-editor/

２）撤退理由

以下の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

プログラムの超個人的なメモ

Memo for Programming.

【JS】DOT言語表示ツール～ d3-graphviz ～

■ はじめに

目次

【１】d3-graphviz

１）補足：D3について

【２】サンプル

例１：Hello world

例２：例２：ファイル読み込み表示する

例３：アニメーション化

例４：ボタン押下で、アニメーション表示

【３】おまけ：graphviz-visual-editorの導入撤退について

１）graphviz-visual-editor

２）撤退理由

参考文献

関連記事