[D3] d3-path(Canvas 2D를 SVG 직렬화) 사용법

canvas를 이용해서 원을 그리는 함수가 있습니다.function drawCircle(context, radius) { context.moveTo(2 * radius, radius) context.arc(radius, radius, radius, 0, 2 * Math.PI)}d3-path 모듈을 사용하면 이 함수를 가져와 svg로 렌더링할 수 있습니다.drawCircle(d3.path(), 10).toString()// M20,10A10,10,0,1,1,0,10A10,10,0,1,1,20,10위에 값을 svg 안에 d로 넣으면 canvas와 같이 원이 그려집니다.d3.path()CanvasPathMethods를 구현하는 새로운 path 직렬 변환기를 구성합니다.path.moveTo(x,y)지..

• format_list_bulleted D3/시각화
• · 2024. 5. 17.
• textsms

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

트리맵은 각 노드의 관련 값에 따라 영역을 직사각형으로 재귀적으로 세분화합니다. 종횡비로 직사각형을 생성하여 가독성과 크기 추정을 제공합니다.d3.treemap()새 트리맵 레이아웃을 만듭니다.treemap(root)루트 및 해당 하위 항목에 다음 속성을 할당하여 배치합니다. 레이아웃에 전달하기 전에 root.sum를 호출해야 합니다.node.x0 - 직사각형의 왼쪽 가장자리node.y0 - 직사각형의 상단 가장자리node.x1 - 직사각형의 오른쪽 가장자리node.y1 - 직사각형의 아래쪽 가장자리treemap.tile(tile)타일이 지정된 경우 어떤 비율로 히트맵의 타일링 설정하고 레이아웃을 반환합니다. 기본값은 황금 비율의 d3.treemapSquarify입니다.타일링 설정값 : binary, d..

• format_list_bulleted D3/시각화
• · 2024. 5. 17.
• textsms

[D3] d3-pack(원형으로 계층구조 표현하기) 사용법

d3.pack()새 pack 레이아웃을 만듭니다.pack(root)루트 및 해당 하위 항목에 다음 속성을 할당하여 지정된 hierarchy를 배치합니다. pack 레이아웃에 전달하기 전에 sum을 호출해야 합니다.node.x - 원 중심의 x 좌표node.y - 원 중심의 y 좌표node.r - 원의 반경pack.radius(radius)원의 반경을 지정된 함수로 설정합니다. 지정되지 않은 경우 null입니다. null인 경우 sum으로 계산됨 값으로 radius가 파생됩니다.pack.size(size)pack 레이아웃의 크기를 [너비, 높이]로 설정합니다.pack.padding(padding)패딩이 지정된 경우 인접한 원들과 분리하는데 사용합니다.d3.packSiblings(circles)지정된 원 배..

• format_list_bulleted D3/시각화
• · 2024. 5. 16.
• textsms

[D3] d3-partition(직사각형으로 계층 구조 그리기) 사용법

d3.partion()새 파티션 레이아웃을 생성합니다.partiton(root)루트 및 하위 항목에 대해 다음 속성을 할당하여 지정된 루트에 hierarchy를 배치합니다.node.x0 - 직사각형의 왼쪽 가장자리node.y0 - 직사각형의 상단 가장자리node.x1 - 직사각형의 오른쪽 가장자리node.y1 - 직사각형의 아래쪽 가장자리partition.size(size)크기가 지정된 경우 레이아웃의 크기를 (너비, 높이)로 설정합니다.partition.round(round)round가 지정되는 경우 true로 설정되어 반올림을 활성화합니다. 기본값은 false입니다.partition.padding(padding)패딩이 지정된 경우 사각형에서 안쪽으로 패딩이 생겨 인접한 노드와 분리하는 데 사용됩니다...

• format_list_bulleted D3/시각화
• · 2024. 5. 16.
• textsms

[D3] d3-cluster(클러스터) 사용법

모든 노드가 동일한 수준에 있어야 하는 경우에 유용한 계층구조입니다.tree와 같습니다. 맨 처음 d3.cluster() 부르는부분만 빼고 동일하게 생각하시면 됩니다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

• format_list_bulleted D3/시각화
• · 2024. 5. 10.
• textsms

[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: [ ..

• format_list_bulleted D3/시각화
• · 2024. 5. 10.
• textsms