Viz.js – HTMLでGraphviz

前置きはさておき、ここでは「Viz.js」の使用方法を例を持って示していきます。

【js ライブラリの取得】

GitHubから、

  • full.render.js
  • viz.js

をダウンロードして、好みの場所に配置します。

【実行サンプル】

viz-examplesscript-tagをクリックしてディレクトリを開き、その中のno-worker.htmlを開らいてソースコードをコピーします。それを、テキストエディタに貼付け、保存します。

ここでは、「01-original.html」として保存しました。
これを実行すれば、次の様なグラフが表示されるハズです。

【改善 その1】

グラフ記述部分(以下「Dot」)「digraph { a -> b; }」を外出しにします。

更に、(1) を次のように書き換えて見ます。
残念ながら「SyntaxError: ” string literal contains an unescaped line break」
Dot内に「改行」が使えない模様。

【改善 その2】

複雑な Dot を記述する時に、改行やタブが使えないようでは話になりません。
そこで、新たな改善策。

script タグ内に Dot を単独で定義するようにしました。
それを HTML ソースとして入力すれば、改行や余分なスペースが無視されることを利用しています。
これで、Dot 内でも改行が使用できるようになりました。

【改善 その3】

ここまで来ると、Dot を外部ファイルにしたくなるのは当然の成り行き。
ついでに、jQuery と Bootstrap も導入し DOM の操作や style の改善をしておきましょう。

【サンプル集】

  1. Cluster
  2. Data Struct
  3. Crazy
  4. multi_layout

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください