kansiho's memo

ruby, python, javascript. Rails, wordpress, OpenCV, heroku...

D3.jsによるデータビジュアライゼーション-樹形図(d3-hierarchy・Treeview)まとめ

データ可視化ライブラリD3jsの中でも, 階層的なデータの表現を扱う, d3-hierarchyモジュールの中の樹形図を表現するTreeAPIについてまとめます.

https://raw.githubusercontent.com/d3/d3-hierarchy/master/img/tree.png

基本的に d3-hierarchy/README.md at master · d3/d3-hierarchy · GitHub の以下のAPI

  • Hierarchy (Stratify)
  • Cluster
  • Tree
  • Treemap (Treemap Tiling)
  • Partition
  • Pack

のTreeの重要なところの和訳メモになります.

インストール

<script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>

<script>

var treemap = d3.treemap();

</script>

Treeは, ノードリンクダイアグラムをReingoldのTidyアルゴリズムに則り生成します. このアルゴリズムについては以下を参照しました.

www.slideshare.net

d3.tree()

新しいレイアウトをデフォルトの設定で生成します

tree(root)

指定したオブジェクトをルートとしてレイアウトします

以下のプロパティーをrootとnodeに割り当てます

  • node.x - nodeのx座標
  • node.y - nodeのy座標

tree.size( [width, height] )

ツリーレイアウトのサイズを指定し, ツリーレイアウトを返します.

tree.nodeSize( [width, height] )

ノードサイズを指定します.

サンプルコード

codepenにあげました.

codepen.io