[D3] d3-tree(트리) 이용한 계층구조 그리기 사용법

tree()

기본 설정으로 새 트리 레이아웃을 만듭니다.

const treeLayout = d3.tree()

tree(root)

루트 및 해당 하위 항목에 대해 다음 속성을 할당하여 반환합니다.

• node.x - 노드의 x좌표
• node.y - 노드의 y좌표

x와 y좌표는 임의의 좌표를 나타냅니다. 예를 들어 x를 각도로 y를 반경으로 처리하는 radial 레이아웃을 생성할 수 있습니다. 계층 구조를 레이아웃에 전달하기 전에 sort를 호출할 수도 있습니다.

const hierarchy = d3.hierarchy({
    name: 'root',
    children: [
        {name: 'c1',x:3,y:1},
        {
            name: 'c2',
            children: [
                {
                    name:'c3',
                    children: [
                        {name:'c5'},
                        {name:'c6'},
                        {name:'c7'},                                
                    ]
                },
                {name:'c4'},
            ]
        },
    ]
})

const treeLayout = d3.tree()(hierarchy)

tree.size(size)

크기가 지정되면 레이아웃의 크기를 두 요소의 배열 [너비, 높이]로 설정하고 레이아웃을 반환합니다. 설정하지 않으면 기본값은 [1,1]입니다.

tree.nodeSize(size)

트리 레이아웃의 노드 크기를 지정된 숫자 배열 [너비, 높이] 으로 설정합니다.

tree.separation(separation)

분리가 지정된 경우 설정 후 레이아웃을 반환합니다. 인접 노드를 분리하는 데 사용됩니다. 분리 함수는 노드 a와 b를 전달하며 원하는 분리를 반환해야 합니다. 인접한 노드를 멀리 보낼수 있습니다.

function separation(a, b) {
    return a.height > b.height ? 5 : 2;
}

const treeLayout = d3.tree()
    .separation(separation)
    .size([250,250])