エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【D3.js】 hierarchy を使ってタテ型ツリー作成
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【D3.js】 hierarchy を使ってタテ型ツリー作成
前回は、公式ドキュメントにもソースが展開されているヨコ型ツリーを作成して、ノードのクリックによる... 前回は、公式ドキュメントにもソースが展開されているヨコ型ツリーを作成して、ノードのクリックによるハイライトメソッドを追加しました。 興味ある方はこちらの記事をご覧ください。(デモあります) ※今回は、機械学習などで用いられる決定木分析のデータビジュアライゼーションとしてタテ型で表示させる必要があったため学習した内容を執筆しています。 概要 今回は、タテ型のツリーに挑戦します。 利用するライブラリは、前回と変わらず、D3.jsを利用します。APIもhierarchyと変更ありません。 横型ツリーを作成した前提で進めていきたいと思います。 今回の完成イメージは以下のデモからご覧ください。 コードの解説 前回作成したコードをベースにタテ型ツリーにアップデートしていきます。 ノードを垂直方向に配置 ノードの位置はtranslateプロパティにて設定しています。 xとyの設定値を入れ替えます。上から