[D3.js] 라인 곡선 만들기

codingman(64)

Published in

#kr-dev

Words

195

Reading

1 min

Listen to this post

~1 min

[D3.js] 라인 곡선 만들기

오늘은 라인 곡선을 만들기를 post 주제로 정했습니다. D3.js에서는 다양한 라인을 만드는 방법이 있는데 그중에서 간단한 라인 곡선을 만드는 실험을 하겠습니다.

1. 라인곡선 에디터 참조용

출처 : http://bl.ocks.org/d3indepth/b6d4845973089bc1012dec1674d3aff8
d3indepth’s Block b6d4845973089bc1012dec1674d3aff8
Updated June 19, 2018

위 출처에 가시면 다양한 라인을 확인 하실 수 있습니다.

위 그림처럼 다양한 라인이 제공되는데 저도 공부용으로 이곳 코딩을 참조하고 있네요. 나중에 필요한 라인을 그리게 되면 이곳 저자(d3indepth’s Block)의 라인을 참조 하시면 좋을 듯 싶네요.

2. 라인 곡선 함수

실험 함수 :

d3.line().curve(d3.curveNatural)

데이터 :

var data = [[0, 300], [100, 50], [200, 300/2], [300, 50], [400, 300/3],[500,50]];

코딩

var data = [[0, 300], [100, 50], [200, 300/2], [300, 50], [400, 300/3],[500,50]];
var lineCurve= d3.line().curve(d3.curveNatural);
var pathData = lineCurve(data);

위와 같이 data 값 x,y의 값으로 해서 캔버스에 그리기 위해서 path 데이터를 세팅을 해놓습니다. 실험은 lineCurve은 위와 같이 세팅하고 lineCurve()에 data를 집어 넣습니다.

[결과]

path 결과가 이렇게 만들어 집니다.

만들어진 결과는 다음과 같이 path에 추가 됩니다.

d3.append("path").attr('d', pathData);

전체 코드

자주 코딩되어 온 canvas와 g 코딩 설명은 생략하겠습니다. 위 라인곡선을 대입하여 코딩을 완성하면 다음과 같습니다.

<body>
<script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
<script>
    var data = [[0, 300], [100, 50], [200, 300/2], [300, 50], [400, 300/3],[500,50]];
    var lineCurve= d3.line().curve(d3.curveNatural);
    var pathData = lineCurve(data);
        
    var canvas = d3.select("body").append("svg")
         .attr("width",600)
         .attr("height",400)
         .style("background-color","yellow")
    var g = canvas.append("g")
                   .attr("transform", "translate(" +50 + "," + 0 +")")
                   
    var lineCube = g.append("path")
                    .attr('d', pathData)
                    .attr("stroke" , "#ff0000")
                    .attr("stroke-width" , 5)
                    .attr("fill" , "none")
    </script>
</body>

[결과]
데이터를 기준으로 라인곡선이 이쁘게 만들어 졌네요.

마무리

예전에 Canvas post를 할 때 다양한 SVG의 모양을 다룬 적이 있습니다. 라인과 라인곡선도 마찬가지이고요. 복습이지만 중요한 것은 라인곡선 차트를 만들 때 기본 데이터 출력 방법이기에 이번에 다시 post 내용으로 다루게 되었네요. 여기에 축을 붙이면 완벽하게 라인곡선 차트가 만들어집니다. 오늘 내용은 데이터를 기반으로 라인곡선을 이쁘게 그리는 것이 목적이기에 축같은 코딩은 다 생략했네요.