이럴 때는 어떻게 rj3.svg.line으로 라인을 그릴 수 있을까? 언뜻 예제 1-3처럼 데이터를 즉석에서 변환하면 될 것 같다.

예제 1-3 데이터를 곧바로 변환

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

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

---

 

그러나 같은 데이터를 하나 더 복사하는 건 낭비다. 링크(LINQ) 의 효율성에 길든 C # 개발자가 짤 법한 코드다(링크는 전체 배열을 다시 복사하지 않고 요청할 때마다 원소를 하나씩 배열에서 떼어낸다).

또한, 예제 1-3처럼 하면 사용자 인터페이스에도 걸림돌이 될 수 있다. 데이터가 바뀌면 라인도 동적으로 바뀌게 하고 싶을 때는 어떻게 할까? D3 제작자의 설계 결정(design decision) 덕분에 그리 어렵지 않게 D3로 구현할 수 있지만, D3가 알고 있는 데이터에 한해서만 가능한 일이다. 실데이터를 일회용으로 복사한 사본만으로는 D3 혜택을 누리기 어렵다.