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を使用するのをやめることにします。。。。色々試したんだけどなぁ。。。

でわでわ。。。