D3.js hierarchy 데이터 구조 및 사용법

hierarchy는 계층 데이터를 시각화하기 위한 라이브러리로 다음과 같이 5가지 그리기를 제공한다.

• Cluster
• Tree (준비중…)
• Treemap (준비중…)
• Partition (준비중…)
• Pack

각 드로잉은 각 페이지를 참조하면 되고, 여기에서는 모두에 공통되는 데이터 구조에 대해 설명한다.

데이터 구조

먼저 하나의 노드에 대한 다음 형식으로 데이터를 준비한다.

{
  "name": "A",
  "children": [{ },{ }]
}

자식, 손자 노드를 추가하고 싶은 경우에는 children 배열에 같은 포맷의 객체를 추가해 간다. 마지막 노드의 경우에는 “children"을 생략한다.

예를 들어, 아래 구조의 트리를 그리려고 한다면,

아래와 같은 데이터 구조를 준비해야 한다.

var data =
{
    "name": "A",
    "children": [
      { "name": "B" },
      {
        "name": "C",
        "children": [{ "name": "D" }, { "name": "E" }, { "name": "F" }]
      },
      { "name": "G" },
      {
        "name": "H",
        "children": [{ "name": "I" }, { "name": "J" }]
      },
      { "name": "K" }
    ]
  };

데이터 구조 변환

위에서 준비한 데이터로 그리기 위해서는 데이터 구조를 두번 변환해야 한다.

준비된 계층 데이터 → hierarchy용 데이터 구조 → 그리기 종류별 데이터 구조

그러려면, 두번 모두 함수를 한번만 호출하면 된다. 같은 데이터 구조로 다른 드로잉으로 변환할 수 있는 구조로 되어 있다.

첫째, hierarchy를 위한 데이터 구조로의 변환은 아래 함수를 사용한다.

var root = d3.hierarchy(data);

루트는 준비된 데이터와 동일한 구조의 객체를 작성하고, 다음 변수를 추가한다.

루트 변수 자체에는 선앞부분인 node에 대응하는 객체가 포함되어 있어 이전과 같은 위에 그림과 같은 구조라면, 아래같이 하면 노드 “B"의 객체에 접근할 수 있다.

root.children[0]

hierarchy 노드의 함수 목록

노드에는 다음과 같은 함수가 준비되어 있다.