この記事では、Googleスプレッドシートで管理している階層データを、D3.js を使ってブラウザ上にツリー構造で可視化する方法をご紹介します。
表示イメージ
スプレッドシート
元のデータです。
スプレッドシートの情報を元に階層表示
複数の階層表示にも対応しています。
さらに、ノードをホバーした際に補足情報をツールチップで表示するようカスタマイズしています。
目次
スプレッドシートの作成
まずはスプレッドシートを用意。
たとえば以下のとおり。
| グループ名 | nodeId | parentId | ノード名 | 補足情報 |
|---|---|---|---|---|
| 猫カフェにゃんた | sample | 店舗本部 | 住所、責任者、営業時間 | |
| 猫カフェにゃんた | sample/猫管理 | sample | 猫管理エリア | 名前、年齢、性格 |
| 猫カフェにゃんた | sample/猫管理/ミケ | sample/猫管理 | ミケ | 3歳、甘えん坊、♀ |
| 猫カフェにゃんた | sample/猫管理/タマ | sample/猫管理 | タマ | 2歳、活発、♂ |
| 猫カフェにゃんた | sample/設備管理 | sample | 設備管理 | 空調、清掃、備品 |
| 猫カフェにゃんた | sample/予約管理 | sample 1 Variant | 予約・顧客管理 | 予約一覧、会員カード |
あとは拡張機能からAPP Scriptを選択してコードを記載するだけです。
以下、やり方です。
GAS│コードの構成
index.htmlで<svg>を配置js.htmlに CSSによる描画ロジックを記述js.htmlに D3.js による描画ロジックを記述main.gsで Apps Script 経由でシートを取得
コード全文
※以下のコードを貼り付けてください。
