어쨌든 rj3.svg.line()을 호출하면 함수가 반환된다. 예제 1-2 다음 줄에서 이 함수에 arrayData를 인자로 주고 호출하는데, 이 배열은 예제 1-1 내부 line 함수의 data인자가 되고 while 루프는 원소를 하나씩 꺼내어 points배열을 채운다.

---

while (++i < n) {
  d = data[i];
  points.push([+getX.call(this,d,i), +getY.call(this,d,i)]);
}

---

 

data 원소는 각각 변수 d로 받아 getX, getY 함수에 전달하고, 여기서 x, y좌푯값을 추출한다(getX와 getY를 실행하는 호출 방법은 본 사례 연구 마지막 부분과 18장에서 다룬다. getX, getY 앞의 +는 숫자처럼 생긴 문자열을 걸러내고 진짜 숫자만 points 배열에 넣는 요령이다). 두 좌푯값은 기본적으로 arrayData 각 원소를 구성하는 원소 2개짜리 배열의 각각 첫 번째, 두 번째 원소 값이다. 다음 예제 1-1 코드 조각이 그렇게 할당한다.

---

var getX = function(point) {
    return point[0];
  },
  getY = function(point) {
  return point[1];
  }

---

 

그다음 segment 함수를 호출하는데, 이 함수는 또 다른 중첩 수준에 위치한 함수로 line 함수의 프라이빗 함수(private function)다. 첫 번째 원소에는 SVG “M “명령어를, 두 번째 원소에는 경로를 넣어 segments 변수를 채운다.

---

function segment() {
  segments.push(“M”,interpolate(points))
}
 
// …
 
if (points.legth) {
segment();
}

---