CanvizPlain: Xdotの描画ライブラリCanvizのprototype.js非依存版

Last updated at 2014-03-10Posted at 2014-03-10

はじめに

Canviz という GraphvizのxdotデータをHTMLのCanvasを使って描画するJavaScriptのライブラリがあります。

Canvizは便利なのですが内部でprototype.jsを使っていてjqueryなどと相性が悪いので、外部ライブラリに依存しないCanvizPlainというのを作ったので共有します。

CanvizPlain は Canviz-0.1 の移植です。
Canviz-0.1がprototypejsを主にClass継承などに使っていたので、その辺りをCoffeeScriptで書き直すことで外部ライブラリを必要としないようにしました。

CanvizPlain は GitHub で公開しています。

こんな感じで使います。

sample.js

// include canviz.js

var xdotText = "... Your xdot text ...";
var canviz = new Canviz("canvas");  // ID of a div like tag.
canviz.parse(xdotText);

GitHubにあげてあるサンプルを実行するとこんな感じに表示されます。

load_graph() というメソッドがOriginalにはあったのですが、JQueryやその他の手段を使えば通信自体は非常に簡単なので、そこの部分は実装していません。というか、そういうの無しで通信を記述するのが面倒なのでやめました。

移植の際に新しいBugを埋め込んだ可能性はあります。
一応、Canvizに付属していた何種類かのサンプルは概ね動いていることは確認しています。

MIT License です。