【D3.js】 hierarchy を使ってタテ型ツリー作成
前回は、公式ドキュメントにもソースが展開されているヨコ型ツリーを作成して、ノードのクリックによるハイライトメソッドを追加しました。 興味ある方はこちらの記事をご覧ください。（デモあります） ※今回は、機械学習などで用いられる決定木分析のデータビジュアライゼーションとしてタテ型で表示させる必要があったため学習した内容を執筆しています。 概要 今回は、タテ型のツリーに挑戦します。 利用するライブラリは、前回と変わらず、D3.jsを利用します。APIもhierarchyと変更ありません。 横型ツリーを作成した前提で進めていきたいと思います。 今回の完成イメージは以下のデモからご覧ください。 コードの解説 前回作成したコードをベースにタテ型ツリーにアップデートしていきます。 ノードを垂直方向に配置 ノードの位置はtranslateプロパティにて設定しています。 xとyの設定値を入れ替えます。上から
【D3.js】 hierarchy で階層ツリーの作成・ノードハイライトの有効
DXなどの文脈で、データ活用への意識が高まり、データビジュアライゼーションが求められる機会が増えてくるのではないかと勝手に思っております。 特に新しい技術ではありませんが、d3.jsを本格的に学び始めましたので、勉強の復習がてらに書いていきたいと思います。 概要 この記事ではまず、d3のhierarchyAPIを使って、階層図を作成します。 階層図といえばということで、徳川略系図の作成をしました。笑 それから、作成した階層図のノードをクリックすることで、クリックされたノードの親にハイライトを有効にしていきます。 今回のデモ コードの解説 では、コードの内容を紹介したいと思います。 ツリーレイアウトの作成 ライブラリを利用するとはいえ、結構ソース量が必要だなというのが正直なところでした。 まずは、今回作る階層図のデータを用意します。 データはJSON形式で用意しました。前述のデモリンク内のd
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
