Treemap

트리맵은 Treemap를 이용해 제작한다. 해당 모듈은 Treemap 타입을 그대로 노출하는 대신에 Treemap 인스턴스를 생성하는 함수를 반환한다. 클라이언트 단에서 전체 모듈을 번들링한 형태로 사용할 때는 daisy.treemap()를 실행하여 Treemap 인스턴스를 생성한다. 모듈별로 사용할 때에는 아래와 같이 treemap 모듈만을 불러와서 사용해도 좋다.

import treemap from 'daisy-chart/src/layouts/treemap'
treemap().container('#chart-container')
  .data(dataset)
  .dimensions(['category', 'sub-category'])
  .measures([{field: 'value', op: 'sum'}])
  .render();

트리맵의 유형은 범주(dimension), 수치(measure)의 조합과 형태 변형을 위한 옵션에 의해 형태가 결정된다. 그 예시는 아래와 같다.

• 범주 : 1개 이상의 범주를 입력하고, 순서에 따라 하위 그룹을 생성한다. (워드 클라우드 형태 사용시에는 범주를 1개만 입력 가능)

• 수치

  • 0개 : 범주에 따라 구별된 리프 노드의 개수에 따라 상위 노드의 크기를 결정한다.
  • 1개 : 리프 노드의 수치 값을 합하여 상위 노드의 크기를 결정한다.

• 형태
  • treemap.shape : 해당 메서드의 값에 따라 트리맵, 원형 패킹 다이어그램, 워드 클라우드 형태로 변환이 가능하다.

API Reference

# treemap.padding([padding]) <>

서브 트리에 여백을 현재 노드에 대한 크기에 비례해 추가한다. 기본 설정값은 0.05이다.

# treemap.reverse([reverse]) <>

기존 너비와 높이 값을 반대로 입력한다. 기본 설정값은 false이다.

# treemap.shape([shape]) <> 예시 추가 예정

트리 구조 표현 방식을 treemap|packing|word 값중 하나를 선택하여 표현한다. treemap의 경우 트리맵을, packing은 원형 패킹 다이어그램을, word는 워드 클라우드를 그린다. 기본 설정값은 treemap이다.

# treemap.size([size]) <>

트리맵의 너비와 높이를 size를 [width, height] 형태로 픽셀 단위로 입력하여 설정한다. 기본 설정값은 null로 전체 너비와 높이를 그대로 사이즈로 사용한다. 해당 너비와 높이 값은 default.width나 default.height 보다 작아야 한다.

# treemap.sortByValue([order]) <> 추후 default 기능으로 변경

서브 트리의 정렬 순서를 범주(dimension) 값이 아닌, 수치 값으로 대체한다. order 값을 natural|ascending|descending 중 택 일하여 정렬 방식을 결정할 수 있다. 기본 값은 natural이며 이때는 값에 의한 정렬을 행하지 않는다.