d3.js는 그래프를 그리기 위한 라이브러리가 아니다. 데이터 비쥬얼라이제이션을 위한 라이브러리다. 예컨데, 생각했던 것과는 달리 꽤나 로우레벨의 라이브러리다. 그래서 제대로 쓰려면 삽질을 좀 해야 한다. 이러한 삽질을 줄이기 위해서 d3.js를 기반으로하는 고수준 라이브러리들도 있긴 하다.
나는 그냥 삽질하기로 했다. 이렇게 된거 jquery도 덤으로 공부하지 뭐! 라는 마음가짐으로
기본 선 그리기
선을 그리기 위해서는 두개의 점이 필요하다는 건 모두 알고 있을 테고, 각 점은 x,y 좌표로 표시할 수 있다. d3.js는 x1, y1, x2, y2 4개의 속성을 이용해서 점을 그릴 수 있다. (x1, y1)에서 (x2, y2)로 선을 그리겠다는 이야기.
소개
기본 선 그리기
<div id="line01"></div> <script type="text/javascript"> var lineGraph = d3.select("#line01") .append("svg:svg") .attr("width", 500) .attr("height", 200); var myLine = lineGraph.append("svg:line") .attr("x1", 40) .attr("y1", 50) .attr("x2", 450) .attr("y2", 150) .style("stroke", "rgb(6,120,155)"); </script>var myLine = lineGraph.append("svg:line") .... .... .style("stroke", "rgb(6,120,155)") .style("stroke-width", 24);Recent Posts
Archive Posts
Tags