Treant.jsとはツリーダイアグラムを描画するためのJavaScriptライブラリです。
Treant.jsでツリーダイアグラムを描画してみました。
http://codepen.io/shoyan/details/MeaqzN/
簡単なサンプルを作ってみる
まずは簡単なサンプルを作ってみましょう。
http://codepen.io/shoyan/pen/qNOMoN
codepen.ioを使うと簡単にサンプルが作成できるので便利です。
Treant.jsを利用するには、いくつか必要なモジュールがあります。
JS
CSS
BaseとなるHTMLのテンプレート
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
JS
JavaScriptファイルです。設定をJSONで定義して、コンストラクタに渡しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
基本的には、nodeStructureに必要なノードを定義して、CSSで見た目を調整するという感じです。
アニメーションにも対応していて、その場合はjQueryが必要だったりするようです。
サンプルも色々あるので参考にしてみるとよいと思います。
http://fperucic.github.io/treant-js/