D3js d3.hierarchy結構資料的好幫手

用途

d3.hierarchy可協助我們遍歷各種樹狀結構，讓我們不用自己去遍歷複雜的結構，可以說是結構化資料整理的好幫手！

d3.hierarchy

範例結構化資料：

{
  "name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
}

可以看的出來children就是子資料結構。

const myHierarchy = d3.hierarchy(datas);

console.log(myHierarchy);

透過 d3.hierarchy我們可以知道，目前資料的階層關係，轉成hierarchy，也可以直接使用hierarchy的各種API遍歷此樹狀結構。當然也可以自訂子資料的key

const myHierarchy = d3.hierarchy(datas, data => data.children);

console.log(myHierarchy);

用以上方法即可遍歷自己期待的key。

node.eachAfter

範例：

...省略
family = d3.hierarchy(datas, data => data.sub)
family.eachAfter((node) => console.log(node));

其實這就是tree結構中的後序遍壢。

node.eachBefore

範例：

...省略
family = d3.hierarchy(datas, data => data.sub)
family.eachBefore((node) => console.log(node));

其實這就是tree結構中的前序遍壢。

node.each

範例：

...省略
family = d3.hierarchy(datas, data => data.sub)
family.each((node) => console.log(node));

其實這就是BFS遍壢。

node.copy

範例：

...省略
family = d3.hierarchy(datas, data => data.sub)
const newFamily = family.copy();

這是deep copy非常方便好用，防止其他副作用產生，一接到樹狀結構，馬上就是copy，隔離原始資料跟操作資料。

結論

這API一開始覺得就看過就好，直到遇到d3-flow-tree-layout，才特別研究，因為有一個需求需要實現某項結構性的功能，才發現這d3.hierarchy的好。

參考

d3-flow-tree-layout
d3-hierarchy