Treant.jsを使うときのメモになっています。
Treant.jsのAPIドキュメント(connector)
ここのページを参照して、下の様なドキュメントがあります。
ここに記載しているものはちゃんと読めばわかるのでしょうが、英語だから部分的に読んでしまいがちです。。。。「chart」プロパティの内容に関して記載しています。なのでダイヤグラムを作成するときに使用した設定データの「chart」プロパティに何を設定するのか記載していると思われます。(仮定です)
Treant.jsの起動風景
設定用オブジェクトのコード
下のコードはGitにアップしています。
var config = {
chart: {
container: "#breakTree",
levelSeparation: 150,
siblingSeparation: 15,
subTeeSeparation: 15,
rootOrientation: "NORTH",
node: {
HTMLclass: "tennis-raw",
drawLineThrough: false
},
connectors: {
type: "straight",
style: {
"stroke-width": 2,
"stroke": "#ccc"
}
}
},
上記の部分で「chart: XXXX ...」と記載している部分がプロパティの内容になります。
そして、今回は下の様に変更したいと思っていますので。。。
上記コードの赤字の部分を下の様に変更しました。
levelSeparation: 50,
値を「150」〜「50」に変更しました。簡単に変更できました。やはりドキュメントは読んだ方が楽に作業が進みますな(笑)
しかし、クリックイベントの追加(addEventListener)が使えなく。。。クリックイベントの追加実装ができないため、Treant.jsを使用するのをやめることにします。。。。色々試したんだけどなぁ。。。
でわでわ。。。