cl.pocari.org - canvas を使った JavaScript によるグラフ描画ライブラリ

canvas を使った JavaScript によるグラフ描画ライブラリ

- new Javascript/Canvas Graph library
  http://aslakhellesoy.com/articles/2006/02/09/announcement-new-javascript-c ...



  HTML の canvas タグを使ったグラフ描画ライブラリ．アルゴリズムはスプリングモデル．
  canvas タグは Safari 2，Firefox 1.5，Opera 9 でサポートされている．

  使い方は非常に簡単で，上記の画像は以下のソースで実現．本体は graph.js というファイル．

<canvas id="people" width="350" height="350" style="border: 1px solid black"></canvas>
<div id='wilma'>Wilma</div>
<div id='fred'>Fred</div>
<div id='dino'>Dino</div>
<div id='barney'>Barney</div>
<div id='aslak'>Aslak</div>
<div id='dave'>Dave</div>
<div id='patty'>Patty</div>

<script type="text/javascript">
function start() {
    var g = new Graph();

    g.addEdge($('fred'), $('wilma'));
    g.addEdge($('wilma'), $('dino'));
    g.addEdge($('fred'), $('barney'));
    g.addEdge($('wilma'), $('barney'));
    g.addEdge($('aslak'), $('fred'));
    g.addEdge($('aslak'), $('dave'));
    g.addEdge($('patty'), $('aslak'));
    g.addEdge($('barney'), $('patty'));

    var layouter = new Graph.Layout.Spring(g);
    layouter.layout();

    var renderer = new Graph.Renderer.Basic($('people'), g);
    renderer.draw();
}
</script>