[D3.js] D3.js 축(Axis) 복습

사전학습 : [D3.js] 축(Axis) 함수

예전에 연습했던 코딩 중 하나를 자료 정리하다가 찾게 되었는데 괜찮은 예제라 생각 되어서 post 연재 중 겹치는 내용이지만 복습 차원으로 post를 작성해 봅니다.

축 관련 post에서 일부 이야기 했었는데 추가로 실험 했던 내용을 다뤘습니다.

axisTop, axisBottom 축

    var axisTop = d3.axisTop() //axis의 위쪽으로 숫자출력함
            .ticks(5) //출력눈끔조절
            .scale(범위); //눈끔선 범위

    var axisBottom = d3.axisBottom() //axis의 아래쪽으로 숫자출력함
            .scale(범위);

ticks의 의해 눈금 조절을 할 수 있습니다. scale 범위의 값으로 축의 범위를 지정이 되는데 초기 세팅을 위와 같이 ticks의 할 때와 안할때를 나누어 축이 어떻게 그려지는지 살펴보도록 하죠.

이 축은 실제적으로 캔버스 위에 그려지는데

var canvas = d3.select("body").append("svg")
            .attr("width",width)
            .attr("height",width)
            .append("g")
            .attr("transform","translate(50,50)")
            .call(axisTop);

            canvas.append("g")
             .attr("transform","translate(0,270)")
             .call(axisBottom);

위와 같이 call()함수안에 방금 앞에서 세팅한 axisTop, axisBottom 값을 세팅하게 됩니다. 참고로 canvas 변수에 axisTop을 묶어 놓은 방법과 분리된 canvasdml axisBottom을 추가하는 방식으로 나누어 살펴 볼 수 있는데, axisTop을 묶어 놓으면 다음 차트 안에 데이터를 시각화 할 때 axisTop이 영향을 미치지만 axisBottom의 경우는 데이터를 시각화 할 때 영향을 미치지 않고 독립된 이미지로 그려지게 됩니다. 설명이 잘 안된 것 같은데 한번 axisBottom을 표현한 코딩처럼 axisTop을 코딩하면 그 차이를 쉽게 느끼실 수 있을 거에요.

axisTop, axisBottom 축에 맞게 데이터 출력

data를 기준으로 한번 차트를 만들어 보도록 하겠습니다.

예)

<body>
 <script src="http://d3js.org/d3.v5.min.js"></script>
 <script>
    var data = [10,50,100];
    var width = 500;
    var height = 500;

    var widthScale = d3.scaleLinear().domain([0,d3.max(data)]).range([0,width-100]);
    var color = d3.scaleLinear().domain([0,d3.max(data)]).range(["red","blue"]);
          
    var axisTop = d3.axisTop() //axis의 위쪽으로 숫자출력함
            .ticks(5) //출력눈끔조절
            .scale(widthScale); //눈끔선 범위

    var axisBottom = d3.axisBottom() //axis의 아래쪽으로 숫자출력함
            .scale(widthScale);
            
    var canvas = d3.select("body").append("svg")
            .attr("width",width)
            .attr("height",width)
            .append("g")
            .attr("transform","translate(50,50)")
            .call(axisTop);

            canvas.append("g")
             .attr("transform","translate(0,270)")
             .call(axisBottom);
        
    var bars = canvas.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("width",function(d){return widthScale(d)})
            .attr("height",50)
            .attr("fill",function(d){return color(d);})
            .attr("y",function(d,i){return i*100+10});
    
 </script>
</body>

[결과]

마무리

기초 예제로 좋을 것 같아서 간단한 예제를 예전 공부했던 자료 중에서 하나 찾아 post로 작성해 보았습니다. 이 소스는 유튜브에서 보고 공부했던 내용인가 암튼 잘 기억이 나지 않는 자료네요. 나름 해석하고 기초를 배울 때 공부했던 내용이라서 암튼 학습용으로 좋은 예제일 것 같아서 소개 합니다.

_{Sponsored ( Powered by dclick )}

[D3.js] D3.js 축(Axis) 복습 | Ecency