[javascript] D3.js를 이용한 나무맵 그리기

07 Dec 2023

javascript

D3.js(D3: Data-Driven Documents)는 JavaScript를 사용하여 데이터 시각화를 위한 도구를 제공하는 라이브러리입니다. 이번에는 D3.js를 활용하여 나무맵을 그려보겠습니다.

D3.js란?

D3.js는 SVG(Scalable Vector Graphics)와 CSS를 이용하여 데이터를 시각화하는데 사용됩니다. 데이터와 DOM(Document Object Model)를 연결하는 방식으로 작동하며, 데이터의 변화에 따라 DOM을 동적으로 업데이트할 수 있습니다. 따라서, D3.js는 데이터와 시각화 요소를 단방향으로 연결하여 데이터의 변화에 따라 시각화가 자동으로 업데이트되는 효과적인 시각화 도구로 알려져 있습니다.

나무맵을 그리는 방법

D3.js 라이브러리를 프로젝트에 추가합니다. 다음 명령을 사용하여 D3.js를 설치할 수 있습니다.

npm install d3

HTML 문서 내에서 그래프를 그릴 공간인 <div> 태그를 추가합니다.

<div id="chart"></div>

JavaScript 코드를 작성하여 나무맵을 그립니다. 다음은 간단한 예제입니다.

// 데이터
var data = [
  { name: "Root", children: [
    { name: "Node 1", children: [
      { name: "Leaf 1" },
      { name: "Leaf 2" }
    ] },
    { name: "Node 2", children: [
      { name: "Leaf 3" },
      { name: "Leaf 4" }
    ] }
  ] },
];

// 나무맵 그리기
var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 400)
  .attr("height", 400);

var rootNode = d3.hierarchy(data[0]);
var treeLayout = d3.tree().size([300, 300]);

treeLayout(rootNode);

var links = rootNode.links();
var nodes = rootNode.descendants();

svg.selectAll(".link")
  .data(links)
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", d3.linkVertical()
    .x(d => d.x)
    .y(d => d.y));

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

svg.selectAll(".label")
  .data(nodes)
  .enter()
  .append("text")
  .attr("class", "label")
  .attr("x", d => d.x + 10)
  .attr("y", d => d.y + 5)
  .text(d => d.data.name);

위의 코드는 데이터를 기반으로 나무맵을 그리는 간단한 예제입니다. 먼저 데이터를 정의하고, SVG 요소를 추가하고, 나무 레이아웃과 관련한 설정을 수행합니다. 그리고 링크와 노드를 생성하여 나무맵을 그리고, 각 노드에 이름을 표시합니다.

마무리

D3.js를 사용하면 다양한 형태의 시각화를 구현할 수 있으며, 이 중에서도 나무맵은 데이터의 계층적 구조를 표현하기에 유용합니다. D3.js를 통해 나무맵을 그리는 방법을 알아봤는데요, 이를 기반으로 원하는 형태로 시각화를 구현해보시기 바랍니다.

D3.js란?

나무맵을 그리는 방법

마무리

참고 자료