line.x와 line.y는 정말 잘 결정한 설계 요소다. 사용법을 보자(예제 1-4).

예제 1-4 line.x와 line.y 사용법

소스 파일 1장\rj3\pathFromObjects.js

(function() {
var objectData = [
      { x: 10, y: 130 },
      { x: 100, y: 60 },
      { x: 190, y: 160 },
      { x: 280, y: 10 }
    ],
    lineGenerator = rj3.svg.line()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; }),
    path = lineGenerator(objectData);
 
document.getElementById('pathFromObjects').setAttribute('d',path);
}());

---

 

이렇게 호출하면,

x(function(d) { return d.x; })

예제 1-1에서 주어진 함수로 getX 변수의 기본 함수를 교체한다. 그리고 while 루프에서,

points.push([+getX.call(this,d,i), +getY.call(this,d,i)]);

getX.call은 교체한 함수를 호출하여 해당 객체의 x프로퍼티, 즉 사본 아닌 원래 객체 값을 반환한다.

이 call을 눈여겨볼 가치가 있다. 18장에서 다룰 내용을 몰래 갖다 쓰지 않아도, x 좌푯값을 얻는 함수가 무엇이든(여기서 function(d) {return d.x ;} 함수는 인자가 하나밖에 없지만) 인자 2개를 넘겨 호출하도록 마련됐다. 두 번째 인자 i는 배열 인덱스로, 여기서는 쓰지 않지만 다른 곳에서는 쓸 수 있다. 바로 이것이 함수 오버로딩(function overloading)이라는 객체 지향 개념을 자바스크립트에 녹인 원리다.