더북(TheBook)

d3.svg.line 함수의 전체 버전 코드는 이렇게 시작한다.


d3.svg.line = function() {
return d3_svg_line(d3_identity);
};
 
function d3_svg_line(projection) {
 /*** vars 선언문 줄임 ***/
 
  function line(data) {
  /*** vars 선언문 줄임 ***/
 
    function segment() {
    segments.push("M", interpolate(projection(points), tension));
    }

 

d3 _svg _lineprojection은 점 데이터를 다른 좌표 공간(coordinate space)에 투사(project)할 때를 대비한 파라미터다. projection 기본값은 d3 _identity로 점 데이터를 변경하지는 않지만, 다른 방법으로 투사할 수는 있다. 예컨대 d3 _svg _lineRadial 투사를 주입하면 d3.svg.line.radial로 극 좌표계(polar coordinates)(원점에서의 각도와 거리)를 사용할 수 있다.


d3.svg.line.radial = function() {
var line = d3_svg_line(d3_svg_lineRadial);
return line;
};
function d3_svg_lineRadial(points) {  
/*** 점 데이터를 극 좌표계로 변환 ***/ 
return points;
}

 

좌표 공간에 의존성을 주입한 D3의 라인 생성기는 더없이 유연한 모습이다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.