[javascript] D3.js를 이용한 범례 추가하기

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 강력한 자바스크립트 라이브러리입니다. 이번에는 D3.js를 사용하여 그래프에 범례(legend)를 추가하는 방법에 대해 알아보겠습니다.

1. 범례 요소 생성하기

먼저, 범례를 포함할 요소를 문서에 추가해야 합니다. 이를 위해 HTML에서 <svg> 요소 안에 <g> 요소를 추가하고, legend 클래스를 적용합니다.

<svg width="500" height="300">
  <g class="legend"></g>
</svg>

2. 범례 데이터 지정하기

다음으로, 범례에 표시할 데이터를 지정해야 합니다. 예를 들어, 각 범례 항목의 라벨과 색상을 포함하는 배열을 생성합니다.

var data = [
  { label: "항목 1", color: "red" },
  { label: "항목 2", color: "blue" },
  { label: "항목 3", color: "green" }
];

3. 범례 그리기

이제 D3.js를 사용하여 범례를 그릴 수 있습니다. 먼저, legend 요소를 선택하고, selectAll() 메서드를 사용하여 데이터에 기반한 실제 범례 항목을 생성합니다.

var legend = d3.select(".legend");

var legendItems = legend
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "legend-item")
  .attr("transform", function(d, i) {
    return "translate(0," + i * 20 + ")";
  });

4. 범례 아이콘 그리기

각 범례 항목에는 해당 색상과 동일한 아이콘을 그려야 합니다. 여기서는 원을 사용하겠습니다. legendItems 컨테이너 안에 원을 추가하고, fill 속성으로 색상을 지정합니다.

legendItems
  .append("circle")
  .attr("r", 5)
  .attr("cx", 10)
  .attr("cy", 10)
  .style("fill", function(d) {
    return d.color;
  });

5. 범례 라벨 추가하기

각 범례 항목에는 라벨도 함께 표시되어야 합니다. 여기서는 텍스트 요소를 사용하여 라벨을 추가하겠습니다.

legendItems
  .append("text")
  .attr("x", 20)
  .attr("y", 10)
  .text(function(d) {
    return d.label;
  });

6. 결과 확인하기

이제 웹 브라우저에서 페이지를 열고, 그래프에 범례가 제대로 추가되었는지 확인할 수 있습니다.

결론

D3.js를 사용하면 간단하게 그래프에 범례를 추가할 수 있습니다. 이를 통해 데이터 시각화의 가독성과 이해력을 크게 향상시킬 수 있습니다.