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

d3-svg-create

D3.js - Create SVG Elements
D3.js - SVG 요소(Elements) 생성과 Style 속성(Attribute)

  • D3를 이용한 SVG 요소(Elements) 생성

      • 이 페이지에서는 D3.js를 사용하여 데이터를 기반(Based on data)으로 웹 페이지에 SVG 요소를 추가하는 방법에 대하여 설명한다.

    • SVG(Scalable Vector Graphics) 란?

        • SVG는 선, 직사각형, 원, 타원 등과 같은 다양한 모양을 그리는 메소드를 기본으로 제공하기 때문에 SVG를 사용하면 시각화 작업에 더 많은 유연성과 성능을 얻을 수 있다.

      • SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다.
        • Vector Graphics이 란?
          • Vector Graphics은 도형의 정보를 위치, 간격, 방향, 굴절 등 수학적인 형태로 제공한다.
          • Vector Graphics은 Pixel graphic에 비교하여 파일의 크기가 작고, 선명도와 같은 질적인 손상 없이 임의로 확대하거나 축소할 수 있다. 그러나 자연 풍경과 같이 수학적인 형태를 갖지 않는 복잡한 도형은 Pixel graphic이 더 유리하다.
        • XML(eXtensible Markup Language)은?
          • HTML과 매우 유사한 markup language 이다. Text로 구성되어 있기 때문에 메모장과 같은 문서 편집기로 편집이 가능하다.
          • 데이터를 저장하고 전송하기에 적합하게 설계되었다.
      • SVG는 웹을 위한 벡터 기반 그래픽을 정의하는 데 사용된다.
        • HTML 문서에 포함되어 웹 페이지에 벡터 기반 그래픽 기능을 부여 한다.
      • SVG 이미지와 동작은 XML 텍스트 파일들로 정의되어 목록화·검색화·스크립트화가 가능하며 필요하면 압축도 가능하다.
        • XML은 데이터를 체계적으로 목록화하여 저장하기 때문에 검색이 용이하고 스크립트 언어를 사용하여 데이터를 생성하기 용이하다. SVG의 이미지와 그 동작을 이러한 속성을 갖은 XML로 기술하였기 때문에 SVG도 동일한 장점을 갖는다.
      • 현재 대부분의 주요 웹 브라우저들은 SVG를 지원하기 때문에 별도의 프로그램 설치 없이 대부분의 웹 브라우저에서 사용할 수 있다.
      • SVG는 DOM과 같은 다른 W3C 표준과 통합되어 있기 때문에 SVG 요소(Elements or Node)에 쉽게 접근하여 처리(JavaScript와 같은 프로그래밍 언어를 사용하여)할 수 있다.
      • SVG 파일의 모든 요소와 모든 속성에 애니메이션을 적용 할 수 있다.
    • SVG Circle Elements

      • HTML 페이지에 직접 SVG Element를 포함시키는 예

          • SVG Element를 직접 HTML 페이지에 포함시킨 예

          위 HTML 문서를 복사하여 svg-circle.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 r=25이 원이 출력된다.

          이 예에서는 <svg> Element를 직접 HTML 문서에 삽입하였다. 그러나 이러한 방법은 다양한 이미지 생성과 처리를 하기에는 부족하기 때문에 이 페이지에서는 D3.js를 사용한 <svg> Elements의 생성과 처리에 대하여 설명한다.

    • D3를 이용한 SVG 요소(Element) 생성
      • SVG Element를 보관할 SVG Element(SVG Container) 생성하기

          • 웹 브라우저에서 SVG Element(이미지 or 도형)를 출력하기 위하여는 SVG Element를 보여줄 공간(SVG Container or Canvas)가 필요하다.

        • 아래 예는 SVG Element를 보관할 SVG Element(SVG Container) 생성하는 예이다.

          • 위 HTML 문서에서는 SVG Element를 보관할 SVG Element만 생성하고 아직 출력할 이미지를 추가하지 않은 상태이다.

        • 아래 예에서는 SVG Element를 보관할 SVG Element(SVG Container)에 circle Element를 추가한다.

          • 위 HTML 문서를 복사하여 d3-svg-circle.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 r=25이 원이 출력된다.

          이 예에서는 d3.js를 사용하여 svg Element를 HTML 문서에 삽입하였다. 그러나 이 방법도 다양한 이미지 생성과 처리를 하기에는 부족하기 때문에 아래에서 Data에 기반한 <svg> Elements의 생성과 처리에 대하여 설명한다.

        • d3-svg-circle.html 파일의 동작을 이해하기 위한 "개발자 도구" 실행 예
          • 윗 그림은 Chrome의 "개발자 도구"의 "Elements" 창이다. Chrome 주소창 우측에 있는 "3개의 점 -> 개발자 도구 -> Elements"를 선택하면 "개발자 도구"의 "Elements" 창이 열린다.
          • "Elements" 창에서 Script에 의하여 생성된 svg circle element를 확인할 수 있다.
    • Data Binding에 의한 SVG 요소(Elements) 생성

        • Data Binding 참고자료: D3.js - Data Binding

      • 아래 예에서는 1차원 Data를 이용하여 SVG 요소(Elements) 생성하는 예 이다.

        • 위 HTML 문서를 복사하여 d3-circle-multi.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 r = 10, 20, 30 출력된다.

      • "개발자 도구" 실행 예
        • "Elements" 창에서 Script에 의하여 생성된 svg circle element를 확인할 수 있다.
      • 위 HTML 문서에 의하여 출력된 3개의 원
    • 데이터를 기반으로 SVG 요소(Elements)를 생성하고 스타일 설정하기
      • 아래 예에서는 2차원 데이터를 기반으로 SVG 요소(Elements)를 생성하고 스타일을 설정한다.

        • 위 HTML 문서를 복사하여 d3-circle-multi-attr.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 x = 100, 200, 300 이고 y = 50 위치에 r = 10, 20, 30 인 원이 "Yellow", "Lime", "Teal" 색으로 출력된다.

        이 예에서는 2차원 Data Binding으로 3개의 원을 동적으로 생성하고, 속성을 설정하였다.

      • "개발자 도구" 실행 예
        • "Elements" 창에서 Script에 의하여 생성된 svg circle element를 확인할 수 있다.

  • 자주 사용하는 SVG 요소(Elements)
    • SVG 요소(Elements)의 Style 속성(Attribute)
      • fill: Element의 채우기 색상이다. 색상 이름, 16진수 값, RGB, 또는 RGBA 값일 수 있다.
      • stroke: Stroke color로 위 예와 같은 색상을 지정할 수 있다.
      • stroke-width: 픽셀 단위로 선 또는 경계의 너비를 지정한다.
      • opacity: 불투명도/투명도를 숫자로 지정한다. 0은 완전히 투명하고 1은 완전히 불투명한 경우이다.
      • font-family: font-family를 지정할 수 있다.
      • font-size: Text elements의 글꼴 크기를 지정할 수 있다.
    • Line
      • SVG에서 line element는 <line>으로 표현된다.
        • SVG line element 예

          • <line x1="10" y1="20" x2="60" y2="20" style="stroke: black; stroke-width: 2;"/>

          • x1: Line 시작점의 x좌표, y1: Line 시작점의 y좌표
          • x2: Line 끝점의 x좌표, y2: Line 끝점의 y좌표
          • stroke: 선의 색, stroke-width: 선의 폭

        • D3로 SVG line 그리기 예

    • Rectangle
      • SVG에서 Rectangle element는 <rect>으로 표현된다.
        • SVG Rectangle element 예

          • <rect x="10" y="10" width="60" height="40" style="stroke: black; stroke-width: 2; fill: Aqua;"> </rect>

          • x: Rectangle 시작점의 x좌표, y: Rectangle 시작점의 y좌표
          • width: Rectangle 폭, height: Rectangle 높이
          • stroke: 선의 색, stroke-width: 선의 폭
          • fill: Rectangle 내부의 색

        • D3로 SVG Rectangle 그리기 예

    • Ellipse
      • SVG에서 Ellipse element는 <ellipse>으로 표현된다.
        • SVG Ellipse element 예

          • <ellipse cx="150" cy="80" rx="80" ry="50" style="stroke: black; stroke-width: 2; fill: Aqua;"> </ellipse>

          • cx: Ellipse 중심의 x좌표, cy: Ellipse 중심의 y좌표
          • rx: Ellipse의 x방향 반경, ry: Ellipse y방향 반경
          • width: Ellipse 폭, height: Ellipse 높이
          • stroke: 선의 색, stroke-width: 선의 폭
          • fill:Ellipse 내부의 색

        • D3로 SVG ellipse 그리기 예
    • Text
      • SVG에서 Text element는 <text>으로 표현된다.
        • SVG Text element 예

          • <text x="20" y="20" style="stroke-width: 2; fill: blue; font-family: sans-serif; font-size: 16px;">Blue sky.</text>

          • x: Text 중심의 x좌표, y: Text 중심의 y좌표
          • stroke-width: 선의 폭
          • fill: text 색
          • font-family: font 종류
          • font-size: font 크기

        • D3로 SVG Text 그리기 예

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



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