Treant.jsでのonClick追加方法

ツリーを表示した状態がこちら(Treant,jsでの描画)です。

そして、表示するのに以下の様にJSON形式でデータを設定します。

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"
             }
         }
    },

    nodeStructure: {
        //image: "./img/Lv0-1_創造実行.png",
        text: {id: "Ob0", name: "Lv0:最終目標" },
        children: [
            {
                text: {id: "Ob1", name: "Lv1:具現化項目A" },
                children: [
                    {text: {id: "Ob4", name: "Lv2:実行項目A-1"}},
                    {text: {id: "Ob5", name: "Lv2:実行項目A-2"}},
                    {text: {id: "Ob6", name: "Lv2:実行項目A-3"}}
                ]
            },
            {
                text: {id: "Ob2", name: "Lv1:具現化項目B" },
                children: [
                    {text:{id: "Ob7", name: "Lv2:実行項目B-1"}},
                    {text: {id: "Ob8", name: "Lv2:実行項目B-2"}},
                    {text: {id: "Ob9", name: "Lv2:実行項目B-3"}}
                ]
            },
            {
                text: {id: "Ob3", name: "Lv1:具現化項目C" },
                children: [
                    {text: {id: "Ob10", name: "Lv2:実行項目C-1"}},
                    {text: {id: "Ob11", name: "Lv2:実行項目C-2"}},
                    {text: {id: "Ob12", name: "Lv2:実行項目C-3"}}
                ]
            },
        ]
    }
};

ここまでの実装で上の画像の様に表示されます。実際のソースはGitにアップしてあります。

本題

ここで、画面を表示するときに以下の様なコードを記述します。

var diagram = new Treant(config);

この部分を以下の様に修正します。

var diagram = new Treant(config, callBack
    , document.getElementById("対象のタグID"));

そして、上記の「callBack」関数を定義します。

function callBack(treeObject) {
   treeObject.nodeDB.db[0].childAt(0)
         .nodeDOM.onclick = function(a) { console.log(a);};
}

この様な形でクリックした時のコールバック関数を実装することができます。

 

そして、もう１つ

stackOverflowを参照しました。設定データにコールバックを設定できる様です。

var config = {
   chart: "#ダイヤグラムを作成する要素のID",
   callback: {
      // ここに処理を記載する
   },

細かいところは、調査中です。

でわでわ。。。