이 블로그는인터넷 환경에서 Javascript, D3(Data-Driven Documents), SVG를 이용한 시각화(Visualization) 기술을 공유 하기 위한 블로그 입니다.

d3-transform

D3.js - SVG Transformation
D3.js - SVG Transformation

  • D3.js - SVG Transformation
    • SVG Transformation 개요

      • SVG는 하나의 요소 또는 요소의 그룹을 변환하는 옵션을 제공한다. SVG는 Translate, Scale, Rotate, Skew를 지원한다.

      • Translate: 도형의 위치를 변환한다. x 축을 따른 변환(tx)과 y 축을 따른 변환(ty) 2개의 옵션을 필요로 한다.
      • Rotate: 회전 중심점을 중신으로 도형을 변환(회전)한다. 회전 각도, x 및 y 축의 회전 중심을 나타내는 cx 와 cy 세 가지 옵션을 필요로 한다. cx와 cy가 주어지지 않은 경우 좌표계의 현재 원점을 회전 중심으로 사용한다.
      • Scale: 도형의 크기(Scale)를 변환한다. x 축의 배율 인수(sx)와 y 축의 배율 인수(sy) 2개의 옵션을 필요로 한다. sy는 선택 사항이며 지정되지 않은 경우 sx 값을 사용한다.
      • SkewX 와 SkewY: x 또는 y 축을 따라 주어진 각도 만큼 기울어지게(skew) 한다. SkewX는 x 축을 따르는 기울기 각도, SkewY는 y 축을 따르는 기울기 각도를 나타낸다.
    • SVG 또는 D3를 이용하여 사각형을 그리고 변환(Translate)하기
      • SVG 사각형을 그리고 변환(Translate)하는 예

          • x 축과 y 축으로 (tx, ty) 만큼 변환한 위치에 사각형을 그린다.

        • SVG 사각형을 그리고 변환(Translate)하는 프로그램 예
      • D3를 이용하여 SVG 사각형을 그리고 변환(Translate)하기

          • x 축과 y 축으로 (tx, ty) 만큼 변환한 위치에 사각형을 그린다.

        • rect Translate 프로그램 실행 예

          • Fig. Rectr 1은 Transformation 이전의 위치이고, Fig. Rectr 2은 Transformation를 실행한 다음의 위치이다.


        • D3를 이용한 rect Translate 프로그램 예

        주: 윗 두 예(SVG 사각형 변환과 D3를 이용한 사각형 변환)를 비교하면 SVG code를 직접 사용하는 것이 더 효과적으로 생각될 수 있다. 그러나 단순한 SVG 요소의 생성은 SVG code를 직접 시용하는 것이 효과적 이지만 동적인 SVG 요소의 생성이 필요한 경우에는 D3를 이용하는 것이 효과적(Data Binding 등 사용)이다.


    • D3를 이용하여 SVG Circle을 그리고 변환(Translate)하기

        • x 축과 y 축으로 (tx, ty) 만큼 변환한 위치에 Circle을 그린다.

      • circle Translate 프로그램 실행 예

        • Fig. Circle 1은 Transformation 이전의 위치이고, Fig. Circle 2은 Transformation를 실행한 다음의 위치이다.


      • circle Translate 프로그램 예

    • D3 - Transform과 Scale

        • x 축 배율 인수(sx)와 y 축 배율 인수(sx) 비율로 Scaling 한다. sy는 선택 사항이며 지정되지 않은 경우 sx 값을 사용한다.

      • rect scale 프로그램 실행 예

        • Fig. Rect 1은 Scaling 이전의 크기이고, Fig. Rect 2은 Scaling을 실행한 다음의 크기이다.


      • rect scale 프로그램 예

    • D3 - Transform과 Skew(SkewX and SkewY)

        • SkewX는 x 축으로 주어진 각도 만큼 기울어지게(skew) 그리고, SkewY는 y 축으로 주어진 각도 만큼 기울어지게(skew) 한다.

      • 직사각형을 X 또는 Y 방향으로 Skew하는 프로그램 실행 예

        • Fig. skewX는 직사각형을 x 방향으로 20도 skew한 예이고, skewY는 직사각형을 y 방향으로 20도 skew한 예이다.


      • 직사각형을 skewX 하는 프로그램 예

    • 여러개의 svg 요소를 Grouping 하여 Transform 하기

        • 이 예는 직사각형과 원을 Grouping 하고 translate와 rotate를 하는 예이다. 직사각형과 원이 Grouping 되어 하나의 요소 같이 변환된다.

      • Group Translate 프로그램 실행 예

        • Fig. Group 1은 Transformation 이전의 위치이고, Fig. Group 2은 Transformation를 실행한 다음의 위치이다.


      • Grouping과 Transformation 프로그램 예

  • Selection - Append - Modifying Elements 관련 페이지 보기



    • 홈
    피드 구독하기: 글 (Atom)