jsViz で画像表示

javascript

よしたんのブログ jsViz を試す を参考にしました。

よしたんのブログでは SVG で画像表示してましたが、htmlでの表示方法がわかったのでメモします。

まず JavaScript の変更

サンプルの html中にある JavaScript の以下の箇所を変更する。

nodeElement.style.backgroundImage = "url(http://kylescholz.com/cgi-bin/bubble.pl?title=&r=12&pt=8&b=888888&c=" + color + ")";

　　　↓

nodeElement.style.backgroundImage = "url("+dataNode.image+")";

つぎに xml の変更

これはよしたんのブログに書いてあった方法そのまんま。
やることは、node要素にimageプロパティを追加するだけです。

<root root="true" fixed="true" image="./a.png" color="black">
  <node image="./b.png" color="black"></node>
  <node image="./b.png" color="black">
  	<node image="./b.png" color="black"></node>
  	<node image="./b.png" color="black"></node>
  </node>
  <node image="./b.png" color="black"></node>
</root>

結果

以上です。