イントロダクション
前回までは「Treant.js」を使用してダイヤグラムを作成していました。駄菓子菓子、イベントハンドルができない(クリックしたときの処理を追加できない)ので諦めてD3.jsを使用することにしました。ブラウザで起動するアプリにしたいのでJSからは逃げられないのでした。。。
D3.js
上記のリンクにあるサンプルを参考にD3.jsを使用します。そして、クリックイベントにも対応している様なのでそちらの心配もしなくて良いです。(ここが肝心)
使用したことのないライブラリを使用するときは意図する実装ができるかどうかを確認してから使用すると自分の様に無駄な時間を使わなくて良いと思います。
ちなみに、初心者は大いに無駄な時間も使ってください(笑)。JSとはいえプログラムであることには変わりないので、処理(コード)をどんどん深掘りして読んだり、実行したりしていくと「これならいける!」とか「ダメだこりゃ。。。」などの様な「結論」にたどり着きます。これを何度か経験しておくと後々役にたつと思います。
上記のサンプルを実行すると下の様に表示されました。コピペです。
サンプルの画像と多少違うけど。。。まぁ放っておきます。
そして、サンプルコードを見てみます。
今回はJSとHTMLを分けてやりたいのでコピッたソースを下の様に分けました。
<HTML>
<body onload="treeMain()"> ... </body>
<JS> Gitにアップしてあります。
こぴったコードをtreeMain()メソッドで囲みました。変数宣言のみの部分はメソッドの外にあります。
これをカスタムして、目標ブレークツリーを作成しようと思います。
https://zenryokuservice.github.io/GoalAchievement/
でわでわ。。。