D3.js는 데이터 시각화를 위해 널리 사용되는 JavaScript 라이브러리입니다. D3.js를 사용하면 강력하고 유연한 시각화를 할 수 있으며, 그 중 하나인 축 눈금 설정에 대해 알아보겠습니다.

1. 축 생성하기

먼저, 축을 생성해야 합니다. D3.js에서 축은 d3.axis() 함수를 사용하여 생성할 수 있습니다. 아래는 x 축을 생성하는 예제입니다.

var xScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 300]);

var xAxis = d3.axisBottom(xScale);

d3.select("svg")
  .append("g")
  .attr("transform", "translate(50, 50)")
  .call(xAxis);

위 예제에서는 d3.scaleLinear() 함수를 사용하여 x 축의 값 범위를 설정하고, d3.axisBottom() 함수로 x 축 객체를 생성합니다. 이 객체를 d3.select("svg")에 선택한 요소에 추가하면 x 축이 생성됩니다.

2. 축 눈금 설정하기

축을 생성한 후에는 눈금을 설정할 수 있습니다. D3.js에서는 ticks() 함수를 사용하여 눈금의 개수를 지정할 수 있습니다. 아래는 x 축의 눈금 개수를 5개로 설정하는 예제입니다.

var xAxis = d3.axisBottom(xScale)
  .ticks(5);

d3.select("svg")
  .append("g")
  .attr("transform", "translate(50, 50)")
  .call(xAxis);

위 예제에서는 d3.axisBottom(xScale)에 ticks(5)를 체인으로 연결하여 x 축의 눈금 개수를 5개로 설정했습니다.

3. 눈금 스타일 설정하기

눈금의 스타일을 변경하려면 tickFormat() 함수를 사용할 수 있습니다. 아래는 x 축의 눈금을 백분율로 표시하는 예제입니다.

var xAxis = d3.axisBottom(xScale)
  .tickFormat(d3.format(".0%"));

d3.select("svg")
  .append("g")
  .attr("transform", "translate(50, 50)")
  .call(xAxis);

위 예제에서는 d3.axisBottom(xScale)에 tickFormat(d3.format(".0%"))을 체인으로 연결하여 x 축의 눈금을 백분율로 표시했습니다. d3.format(".0%")는 백분율 형식으로 포맷을 설정하는 함수입니다.

4. 결과 확인하기

위의 예제 코드를 실행하면 설정한 축 눈금이 SVG 요소에 표시됩니다. 실제로 웹페이지에서 확인해보세요.