배열 데이터를 SVG 경로(path)로 변환하는 함수다. SVG 경로는 SVG 언어로 국한하면 단순한 문자열에 지나지 않는다. 그림 1-3 같은 라인을 그린다고 하자.

►그림 1-3

 

SVG <path>요소는 다음과 같다.

<path d="M10,130L100,60L190,160L280,10"></path>

말로 풀면 다음과 같다. “펜을 들어 (x, y)좌표가 (10, 130)인 지점으로 이동("M ")한 뒤 (100, 60)까지 선("L ")을 그리고, 또 (190, 160)까지 선을 그리고, 마지막으로 (280, 10)까지 선을 그리시게. ”

예제 1-1 코드로 경로를 그리려면 예제 1-2처럼 호출한다.

 

예제 1-2 rj3.svg.line() 호출부 예시

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

var arrayData = [
      [10,130],
      [100,60],
      [190,160],
      [280,10]
    ],
    lineGenerator = rj3.svg.line(),
    path = lineGenerator(arrayData);
 
document.getElementById('pathFromArrays').setAttribute('d',path);
}());

---

 

굵게 표시된 lineGenerator에는 어떤 값이 할당될까? 예제 1-1 마지막 줄에서 rj3.svg.line()의 반환값은 line으로, 바로 외부 함수(outer function) rj3.svg.line의 내부에 중첩된 함수다!