[javascript] D3.js를 이용한 트리 차트 그리기

07 Dec 2023

javascript

D3.js는 데이터 시각화를 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 이번 포스트에서는 D3.js를 사용하여 트리 차트를 그리는 방법에 대해 알아보겠습니다.

필수 요소

트리 차트를 그리기 위해 다음과 같은 요소가 필요합니다:

데이터: 트리 구조의 데이터를 준비해야 합니다. 일반적으로 JSON 형식으로 데이터를 구성합니다.
SVG 요소: D3.js는 SVG(Scalable Vector Graphics)를 사용하여 그래픽을 그립니다. 따라서 SVG 요소가 HTML 문서에 필요합니다.

데이터 준비

트리 차트를 그리기 위해 우리는 JSON 형식으로 데이터를 구성해야 합니다. 데이터는 계층 구조를 나타내는 객체의 배열로 구성됩니다. 예를 들어, 다음과 같은 JSON 데이터를 가정해 봅시다:

const data = {
  name: "Root",
  children: [
    {
      name: "Node 1",
      children: [
        {
          name: "Leaf 1"
        },
        {
          name: "Leaf 2"
        }
      ]
    },
    {
      name: "Node 2",
      children: [
        {
          name: "Leaf 3"
        },
        {
          name: "Leaf 4"
        }
      ]
    }
  ]
};

SVG 요소 생성

트리 차트를 그리기 위해 SVG 요소를 HTML 문서에 추가해야 합니다. D3.js의 select 및 append 메소드를 사용하여 SVG 요소를 생성할 수 있습니다. 예를 들어, 다음 코드를 사용하여 SVG 요소를 생성합니다:

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

이 코드에서, width와 height는 SVG 요소의 너비와 높이를 나타내는 변수입니다. margin은 그래프와 SVG 요소 가장자리 사이의 여백을 정의하는 변수입니다.

트리 차트 그리기

이제 데이터를 준비했고 SVG 요소를 생성했으므로, D3.js를 사용하여 트리 차트를 그릴 수 있습니다. 그러기 위해서는 D3.js의 tree 메소드를 사용해야 합니다.

const tree = d3.tree().size([height, width]);
const root = d3.hierarchy(data);
tree(root);

이 코드는 데이터를 계층 구조로 변환하고, 트리 레이아웃을 설정하는 역할을 합니다.

후에 이러한 데이터를 기반으로 트리 차트를 그릴 수 있습니다:

svg.selectAll(".node")
  .data(root.descendants())
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", 4)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y);

위의 코드는 트리의 노드를 나타내는 원(circle)을 SVG에 추가합니다. 그리고 각 원의 위치는 d.x와 d.y 속성을 사용하여 계산됩니다.

결론

D3.js를 사용하여 트리 차트를 그리는 방법에 대해 알아보았습니다. 데이터를 준비하고, SVG 요소를 만들고, 트리 레이아웃을 설정한 후에 각 노드를 시각적으로 표현하는 원을 그렸습니다. 이제 당신은 D3.js를 이용하여 복잡한 트리 차트를 그릴 수 있을 것입니다.

필수 요소

데이터 준비

SVG 요소 생성

트리 차트 그리기

결론

참고 자료