더북(TheBook)

경로를 만드는 건 interpolate 함수의 몫으로, 기본적으로 각 점 사이에 "L "을 넣어(각각 암시적인 문자열 변환을 거쳐) 결합한다(interpolate는 이 장 뒷부분에서 자세히 다룬다).


var interpolate = function(points) {
   return points.join("L");
};

 

결국 arrayData배열은


var arrayData = [
      [10,130],
      [100,60],
      [190,160],
      [280,10]
    ],

 

이런 문자열로 변신한다.

"10,130L100,60L190,160L280,10"

끝으로 segments의 두 원소("M"과 문자열로 바뀐 점의 좌푯값)를 return 문에서 결합해 SVG 경로를 완성한다.

"M10,130L100,60L190,160L280,10"

기본 로직은 여기까지다. 지금부터는 자바스크립트를 자바스크립트답게 사용하기 위해 조금 더 복잡한 사례를 하나씩 살펴보자.

만약 점 데이터가 [x, y]좌푯값이 담긴 배열이 아니라 다음과 같은 객체라면?

{ x: 10, y: 130 }

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