2013年3月6日水曜日

Viz.jsで日本語出力

Graphvizの出力をJavaScriptだけで手軽に得られるVis.js。ラベルに日本語を使うとエラーが出たので、ムリクリ動かしてみました。
example.htmlをいじって↓のグラフを表示してみます。まずは日本語なしで。
digraph G {

 subgraph cluster_0 {
  style=filled;
  color=lightgrey;
  node [style=filled,color=white];
  a0 -> a1;
  label = "process #1";
 }

 subgraph cluster_1 {
  node [style=filled];
  b0 -> b1;
  label = "process #2";
  color=blue
 }
 start -> a0;
 start -> b0;
 a0 -> b1;
 a1 -> end;
 b1 -> end;

 start [shape=Mdiamond];
 end [shape=Msquare];
}

すばらしいですね。
さっそくstartのラベルを日本語に変更してみます。
 start [label="はじめ" shape=Mdiamond];

ラベルはちゃんと変わったもののエラーが…
日本語を入れるとグラフソースの終わり位置の計算が狂うような動きをしています。 もうそこソースじゃないっすよ、というところまでグラフだと思って読んでしまってエラーが出ているようです。
そこでexample.htmlの、
function src(id) {
  return document.getElementById(id).innerHTML;
}
を変更して、グラフのソースにたっぷりと空白をつけて先に進みすぎても大丈夫なように、
function src(id) {
  var dot = document.getElementById(id).innerHTML;
  return dot + new Array(dot.length).join(" ");
p}
としてみると、

きれいに表示できましたとさ。

0 件のコメント:

コメントを投稿