[D3] d3-Treemap(히트맵 그리기) 사용법

트리맵은 각 노드의 관련 값에 따라 영역을 직사각형으로 재귀적으로 세분화합니다. 종횡비로 직사각형을 생성하여 가독성과 크기 추정을 제공합니다.

d3.treemap()

새 트리맵 레이아웃을 만듭니다.

treemap(root)

루트 및 해당 하위 항목에 다음 속성을 할당하여 배치합니다. 레이아웃에 전달하기 전에 root.sum를 호출해야 합니다.

• node.x0 - 직사각형의 왼쪽 가장자리
• node.y0 - 직사각형의 상단 가장자리
• node.x1 - 직사각형의 오른쪽 가장자리
• node.y1 - 직사각형의 아래쪽 가장자리

treemap.tile(tile)

타일이 지정된 경우 어떤 비율로 히트맵의 타일링 설정하고 레이아웃을 반환합니다. 기본값은 황금 비율의 d3.treemapSquarify입니다.

타일링 설정값 : binary, dice, resquarify, round, slice, sliceDice, squarify

treemap.size(size)

트리맵 레이아웃 크기를 [너비, 높이]로 설정하고 레이아웃을 반환합니다.

treemap.round(round)

round가 지정된 경우 true로 인식하고 반올림을 활성화하여 레이아웃을 반환합니다.

treemap.padding(padding)

padding이 지정된 경우 inner와 outer에 패딩이 지정되어 트리맵을 분리하는데 사용합니다.

treemap.paddingInner(padding)

내부 패딩을 지정된 padding으로 설정 후 레이아웃을 반환합니다.

treemap.paddingOuter(padding)

외부 패딩을 지정된 top,right,bottom,left padding으로 설정 후 레이아웃을 반환합니다.

treemap.paddingTop(padding)

treemap.paddingRight(padding)

treemap.paddingBottom(padding)

treemap.paddingLeft(padding)