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

でわでわ。。。

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: {
      // ここに処理を記載する
   },

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

でわでわ。。。

JavaScript(JS)による連想配列の初期化

var resoHairetu = [ key1: "値１", key2: "値２" ... ];

値の取得方法

rensouHairetu.key1;
rensouHairetu.key2;

作成した連想配列

/** 目標ブレークツリーの作成 */
var imageMap = {'1': "1_創造実行.png"
    , '2': "2学習習得.png"
    , '3': "3_生活習慣.png"
    , 'A': "A_デザイン_アート.png"
    , 'B': "B_音楽.png"
    , 'C': "C_ファッション.png"
    , 'D': "D_Sports.png"
    , 'E': "E_WebPrograming.png"
    , 'F': "F_園芸_農業.png"
    , 'G': "G_車_バイク.png"
    , 'H': "H_ゲーム.png"
    , 'I': "I_学問.png"
    , 'J': "J_占い_スピリチュアル.png"
    , 'K': "K_アニメ_漫画.png"
    , 'L': "L_グルメ_料理.png"
    , 'M': "M_ホビー.png"
    , 'a': "a_成果物_実物.png"
    , 'b': "b_日記_ノート_ドキュメント.png"
    , 'c': "c_資格_免許.png"
    , 'd': "d_仕組み_ネットワーク.png"
    , 'e': "e_コミニティ.png"
    , 'f': "f_貯金_ポートフォリオ.png"
    , 'g': "g_コレクション.png"
};


コンソール表示するときの呼び出し方

console.log(imageMap['a']);

余談

イメージファイル名をキー(ID)から取得する処理を作成中だったのでメモがてらにコマンドプロンプトでファイル名の一覧を取得する方法を記載いたします。

1. イメージファイルのあるディレクトリに移動する
   「cd 移動したいディレクトリのパス」
   「ls」→現在いるディレクトリのファイルを一覧する
   

これでコピペできます。

ちなみに、ウィンドウズの場合は「dir」コマンドにオプション「/B」をつけて、「dir /B」と入力してやればおっけ〜。

でわでわ。。。