D3.js(D3는 Data-Driven Documents의 약자)는 데이터 시각화를 위해 자바스크립트 라이브러리입니다. D3.js를 사용하면 웹 페이지나 애플리케이션에서 강력한 데이터 시각화를 생성할 수 있습니다.

이번 포스트에서는 D3.js를 사용하여 축 레이블을 설정하는 방법에 대해 알아보겠습니다.

축 레이블 추가하기

D3.js를 사용하여 축을 그릴 때, 축의 레이블을 추가할 수 있습니다. 축 레이블은 해당 축이 어떤 데이터를 나타내는지 사용자에게 알려주는 역할을 합니다.

// SVG 요소 생성
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 200);

// x 축 설정
var xScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 400]);

var xAxis = d3.axisBottom(xScale);

// x 축 레이블 추가
svg.append("text")
  .attr("class", "x-label")
  .attr("x", 200)
  .attr("y", 180)
  .attr("text-anchor", "middle")
  .text("X 축");

// x 축 레이블 스타일 설정
svg.selectAll(".x-label")
  .style("fill", "steelblue")
  .style("font-size", "14px");

위의 코드에서는 svg.append("text")를 사용하여 x 축 레이블을 추가했습니다. attr 함수를 사용하여 레이블의 위치와 스타일을 설정할 수 있습니다. 마지막으로 text 함수를 사용하여 레이블의 텍스트를 지정합니다.

svg.selectAll(".x-label")를 사용하여 x 축 레이블의 스타일을 설정하는 부분은 선택적입니다. 여기서는 fill과 font-size를 설정했지만, 필요에 따라 다른 스타일을 지정할 수도 있습니다.

Conclusion

D3.js를 사용하여 축 레이블을 설정하는 방법에 대해 알아보았습니다. 축 레이블을 추가하면 데이터 시각화가 사용자에게 보다 의미있는 정보를 전달할 수 있습니다. D3.js의 다른 기능과 함께 사용하면 보다 다양하고 효과적인 데이터 시각화를 구현할 수 있습니다.

더 많은 D3.js 사용법과 예제는 D3.js 공식 문서를 참조하세요.