[javascript] D3.js를 이용한 트리 구조 시각화

07 Dec 2023

javascript

이번 포스트에서는 D3.js(D3: Data-Driven Documents) 라이브러리를 사용하여 트리 구조를 시각화하는 방법에 대해 알아보겠습니다. D3.js는 데이터 기반의 문서를 생성하기 위한 자바스크립트 라이브러리로, 강력한 시각화 기능을 제공합니다.

D3.js 소개

D3.js는 데이터 기반의 문서를 생성하기 위한 자바스크립트 라이브러리로, 데이터와 DOM 요소 사이의 연결을 쉽게 만들어 줍니다. D3.js를 사용하면 HTML, CSS, SVG를 이용하여 다양한 시각화를 할 수 있습니다. 트리 구조는 계층적인 데이터를 시각화하는데 유용하며, D3.js는 이를 구현하기 위한 다양한 메서드와 기능을 제공합니다.

트리 구조 시각화 예제

아래는 D3.js를 사용하여 트리 구조를 시각화하는 간단한 예제입니다.

<!-- HTML -->
<div id="tree"></div>

<script src="https://d3js.org/d3.v6.min.js"></script>
<script>
  // 데이터셋
  var data = {
    name: "root",
    children: [
      {
        name: "node1",
        children: [
          { name: "leaf1" },
          { name: "leaf2" }
        ]
      },
      { name: "node2" },
      {
        name: "node3",
        children: [
          { name: "leaf3" },
          { name: "leaf4" }
        ]
      }
    ]
  };

  // 트리 레이아웃 생성
  var treeLayout = d3.tree().size([400, 300]);

  // 트리 데이터 변환
  var root = d3.hierarchy(data);
  var treeData = treeLayout(root);

  // SVG 요소 생성
  var svg = d3.select("#tree")
    .append("svg")
    .attr("width", 500)
    .attr("height", 400)
    .append("g")
    .attr("transform", "translate(50, 50)");

  // 링크 생성
  svg.selectAll(".link")
    .data(treeData.links())
    .enter()
    .append("path")
    .attr("class", "link")
    .attr("d", d3.linkVertical()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; }));

  // 노드 생성
  svg.selectAll(".node")
    .data(treeData.descendants())
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 5);

  // 텍스트 생성
  svg.selectAll(".text")
    .data(treeData.descendants())
    .enter()
    .append("text")
    .attr("class", "text")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y - 10; })
    .text(function(d) { return d.data.name; });
</script>

위 예제에서는 tree라는 id를 가지는 div 요소를 생성하여 트리 구조를 표시합니다. 데이터는 예시로 정의되어 있으며, 트리 레이아웃과 SVG 요소를 생성하여 트리를 시각화합니다.

결론

D3.js는 데이터 기반의 문서를 생성하기 위한 강력한 자바스크립트 라이브러리입니다. 트리 구조를 시각화하기 위해서는 D3.js의 다양한 기능과 메서드를 활용할 수 있습니다. 이를 통해 복잡한 데이터를 직관적이고 시각적으로 이해할 수 있게 됩니다. 추가적으로 D3.js의 문서와 예제를 참고하여 다양한 시각화를 구현해보세요.

D3.js 소개

트리 구조 시각화 예제

결론

참고 자료