[javascript] D3.js를 이용한 축 숨기기

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 JavaScript 라이브러리로 많이 사용됩니다. 이번에는 D3.js를 이용하여 축을 숨기는 방법에 대해 알아보겠습니다.

보통 데이터 시각화에서는 x축과 y축을 표시하여 데이터의 범위와 비교를 쉽게 할 수 있습니다. 하지만 때에 따라서는 축을 감추거나 숨겨야 하는 경우가 있습니다. 이때 D3.js를 이용하면 간단하게 축을 숨길 수 있습니다.

우선 D3.js를 사용하기 위해 해당 라이브러리를 HTML 문서에 추가합니다. 다음은 D3.js를 사용하기 위한 스크립트 태그입니다.

<script src="https://d3js.org/d3.v6.min.js"></script>

이제 D3.js를 이용하여 축을 숨기는 방법을 알아보겠습니다. 우선 막대 그래프를 그리기 위해 데이터를 준비합니다. 데이터의 형식은 아래와 같습니다.

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 5 },
  { name: 'C', value: 15 },
  { name: 'D', value: 8 },
  { name: 'E', value: 12 }
];

다음으로 SVG(Scalable Vector Graphics) 요소를 생성하고 그래프를 그릴 영역을 설정합니다.

const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 300);
  
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = +svg.attr('width') - margin.left - margin.right;
const height = +svg.attr('height') - margin.top - margin.bottom;
const g = svg.append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

이제 x축과 y축을 그립니다.

const x = d3.scaleBand()
  .rangeRound([0, width])
  .padding(0.1)
  .domain(data.map(d => d.name));
  
const y = d3.scaleLinear()
  .rangeRound([height, 0])
  .domain([0, d3.max(data, d => d.value)]);
  
g.append('g')
  .attr('class', 'axis axis-x')
  .attr('transform', `translate(0, ${height})`)
  .call(d3.axisBottom(x));
  
g.append('g')
  .attr('class', 'axis axis-y')
  .call(d3.axisLeft(y));

여기까지는 기본적인 그래프를 그리는 과정입니다. 이제 축을 숨깁니다. x축을 숨기고 싶은 경우에는 아래의 코드를 추가하면 됩니다.

g.select('.axis-x').style('opacity', 0);

y축을 숨기고 싶은 경우에는 아래의 코드를 추가합니다.

g.select('.axis-y').style('opacity', 0);

위의 코드를 추가하면 해당 축이 숨겨지게 됩니다.

축을 숨기거나 보이게 하는 것은 데이터 시각화를 더욱 유연하게 만들어 줄 수 있는 방법 중 하나입니다. D3.js를 이용하면 데이터 시각화에 필요한 다양한 기능을 쉽게 구현할 수 있습니다.

참고: D3.js 공식 문서

이상으로 D3.js를 이용하여 축을 숨기는 방법에 대해 알아보았습니다. 참고가 되셨으면 좋겠습니다.