CODELIB

라인차트의 예제로 그림과 같이 툴팁 기능과정확한 데이터값을 보여주기 위해 꺾은선 그래프를 구현한다. 구현할 툴팁 기능은 바 차트에서는 도형(rect)에 마우스를 올리면 해당하는 값을 보이게 했다.라인 차트는 하나의 선이기 때문에 이렇게 구현할 수 없다.대체 방법은 X축의 값이 있는 부분에적당한 도형(rect, circle등)을 생성하고(append)이 도형에 마우스를 올리면 툴팁이 보이도록 작성한다.반지름(r)이 3 px인 원을 생성하였다.보이고 숨기는 방식은 바 차트와 동일하다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676..

이번에는 D3의 차트를 만들면서 정리한다. 먼저, 라인 차트의 구현 방법을 알기 위해 이전에 작성한 바 차트 중 하나를 골라서 마지막에 다음 코드를 추가한다. 12345678910 var line = d3.line() .x(function(d) {return xScale(d.x) + 55 ; }) .y(function(d) {return yScale(d.y); }); svg.append("path") .data([dataset]) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", "1.5px") .attr("d", line) 위 코드를 추가하고 실행해보면 그림과 같이 라인 차트가 생성되는 것을 볼 수 있다. 즉, D3에서는 바 차트나..

툴팁(tooltip) 기능은그림과 같이 차트 bar(도형)에 마우스를 올리면 별도의 작은 창에 관련 데이터를 보여주는 기능을 구현한다.해당 데이터값의 상세데이터를 표현하고자 할때 사용한다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102svg { border: 1px solid;}.bar { fill: LightCoral;}.bar:hover { fill: maroon;/* DarkSlateBlue; ..