오늘은 라인 곡선을 만들기를 post 주제로 정했습니다. D3.js에서는 다양한 라인을 만드는 방법이 있는데 그중에서 간단한 라인 곡선을 만드는 실험을 하겠습니다.
위 출처에 가시면 다양한 라인을 확인 하실 수 있습니다.
위 그림처럼 다양한 라인이 제공되는데 저도 공부용으로 이곳 코딩을 참조하고 있네요. 나중에 필요한 라인을 그리게 되면 이곳 저자(d3indepth’s Block)의 라인을 참조 하시면 좋을 듯 싶네요.
실험 함수 :
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 내용으로 다루게 되었네요. 여기에 축을 붙이면 완벽하게 라인곡선 차트가 만들어집니다. 오늘 내용은 데이터를 기반으로 라인곡선을 이쁘게 그리는 것이 목적이기에 축같은 코딩은 다 생략했네요.