[D3.js] 축(Axis) 함수 | Ecency

[D3.js] 축(Axis) 함수

차트을 보면 양쪽 사이드에 X축과 Y축을 그리는데 D3.js에서는 이 축을 그리는 함수를 제공해 줍니다. 그래서 오늘은 이 X,Y축을 그려보는 실험을 간단히 해보도록 하겠습니다.

1. 축(Axis) 함수

기본 4개의 함수를 살펴보도록 하죠.

d3.axisLeft () - 왼쪽 수직 축을 생성
d3.axisRight () - 세로 방향의 오른쪽 축을 생성
d3.axisBottom () - 하단 수평 축을 생성
d3.axisTop () - 상단 수평 축을 생성

2. 축(Axis) 그리기

축을 그리기 위해서 축을 그릴 위치를 아래와 같은 위치에 축을 정했습니다.

alt

그릴 축은 캔버스 영역 안에서 그리게 되는데 한번 코딩을 해보도록 하죠.

1) 캔버스 영역 그리기

지난 시간에 캔버스 영역 그리기는 많이 해보았기 때문에 따로 설명 드리는 것은 생략하겠습니다. 간단히 body 태그에 append()함수로 svg 태그를 추가하고 widht, height 크기의 그리게 되고 배경색은 yellow으로 한다는 코딩입니다.

var width = 300, height = 300;
var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height)
   .style("background-color",'yellow');

2) X,Y 축(Axis) 그리기

우선, 축을 그리기 전에 축의 범위를 지정해야 합니다. 범위는 어떻게 지정할까요. 바로 차트를 그릴 읽어 온 데이터의 값의 범위로 축의 범위를 지정해 주면 됩니다.

[데이터]

var data = [100, 200, 300, 400, 500];

[X축 그리기]
위 데이터를 스케일함수를 이용하여 x축 크기를 만들어 봅시다.

 var xScale = d3.scaleLinear().domain([0, d3.max(data)])
   .range([0, width-50]);

위 코딩을 보면 x축 크기는 domain[0,데이터 최대값]을 기준으로 range[0,폭-50]로 반환하게 되면 캔버스 수평(width) 범위에 맞게 X축 scale를 지정해 주게 됩니다.

다음으로, X축을 그리기 위해서 X축 그릴 함수 3.axisBottom()를 사용게 됩니다.

var xAxis = d3.axisBottom().scale(xScale);

하단 수평으로 X축을 그리는데 그 scale은 방금 위에서 만든 xScale값을 scale()함수 안에 대입하면 됩니다.

이제는 캔버스에 X축을 그려 볼까요.

svg.append("g")
    .attr("transform", "translate(30, 280)")
    .call(xAxis)

위에 캔버스 영역 그린 svg에 X축 그리기 위해 g태그를 추가하고 그릴 캔버스 위치는 transform 속성에 translate()함수로 캔버스(30,280) 위치로 이동하게 됩니다. 바로 X축을 그리는 위치가 됩니다. call()함수로 안에 xAxis값을 대입하면 캔버스 안에 지정한 위치를 기준으로 X축을 그리게 됩니다.

[Y축 그리기]
Y축은 위 X축 그리기 과정과 동일합니다.

    var yScale = d3.scaleLinear().domain([0, d3.max(data)])
        .range([height-50, 0]);    
         
    var yAxis = d3.axisLeft().scale(yScale);
         
    svg.append("g")
        .attr("transform", "translate(30, 30)")
        .call(yAxis);

3) 전체 코딩

<body>
 <script type = "text/javascript" src = "https://d3js.org/d3.v5.min.js"></script>  
 <script>
   var width = 300, height = 300;
   var data = [100, 200, 300, 400, 500];
     
   var svg = d3.select("body").append("svg")
         .attr("width", width)
         .attr("height", height)
         .style("background-color",'yellow');
        
    var xScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, width-50]);

    var yScale = d3.scaleLinear().domain([0, d3.max(data)]).range([height-50, 0]);    
 
    var xAxis = d3.axisBottom().scale(xScale);         
    var yAxis = d3.axisLeft().scale(yScale);
         
    svg.append("g")
        .attr("transform", "translate(30, 30)")
        .call(yAxis);
        
    svg.append("g")
        .attr("transform", "translate(30, 280)")
        .call(xAxis)
        
      </script>
   </body>