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

d3-selection

Selection - Append - Modifying
Selection - Append - Modifying Elements

  • D3를 이용한 DOM Element Selection

      • D3를 사용하면 HTML 문서에서 DOM element를 처리(추가/수정/제거)할 수 있다. DOM element 처리를 위하여는 먼저 특정 Element 또는 Element의 그룹을 선택한 다음 다양한 D3 메서드를 사용하여 해당 요소를 처리(추가/수정/제거) 한다.

      이 페이지에서는 D3.js select()와 selectAll() 메서드를 사용하여 DOM 요소를 선택하는 방법과 DOM 요소를 처리하는 방법에 대해 소개한다.

    • Selection method

        • Selection method는 select()와 selectAll() method 가 있다.

      • select() method

          • select() 메서드는 CSS Selectors를 기반으로 HTML 요소를 선택한다. CSS Selectors에서는 아래 세 가지 방법으로 HTML 요소를 정의하고 액세스 할 수 있습니다.

        • HTML element의 Tag (Tag 예: div, h1, p, span 등)
        • HTML element의 Class name
        • HTML element의 Id

          • select() 메서드에서 추가/수정/제거 메서드(append(), html(), text(), attr(), style(), classed() 등)을 연결하여 사용할 수 있다. 이 경우 추가/수정/제거 메서드는 일치하는 elements에 영향을준다.

          참고자료: CSS Selectors

      • selectAll() method
        • selectAll() 메서드는 HTML 문서에서 여러 elements를 선택하는 데 사용된다.
        • select 메소드는 일치하는 첫 번째 element를 선택하지만 selectAll 메소드는 특정 선택자 문자열과 일치하는 모든 요소를 선택한다.
        • 일치하는 항목이 없으면 빈 선택 항목을 반환한다.

          • selectAll() 메서드에서 추가/수정/제거 메서드(append(), html(), text(), attr(), style(), classed() 등)을 연결하여 사용할 수 있다. 이 경우 추가/수정/제거 메서드는 일치하는 모든 elements에 영향을준다.

    • Tag를 사용한 Selection
      • d3의 select() method를 사용하여 특정한 Tag의 HTML element를 선택할 수 있다. 아래 예는 "div" Tag element를 선택하는 예 이다.

        • d3.select(“div”)

        HTML 문서에서 select() method를 사용하여 "div" Tag를 선택하는 예

        위 HTML 문서를 복사하여 select-tag.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 alert 창이 열리고 "Blue sky." 문자열이 출력된다. 창에서 "확인"을 클릭하면 웹 브라우저에 "Blue sky." 문자열이 출력된다.

    • CSS Class name를 사용한 Selection
      • CSS 클래스를 사용하여 스타일이 지정된 HTML element는 아래 예와 같이 class name을 사용하여 선택할 수 있다.

        • d3.select(“.<class name>”)

        HTML 문서에서 select() method를 사용하여 Class를 선택하는 예

        위 HTML 문서를 복사하여 select-class.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 alert 창이 열리고 "Blue sky." 문자열이 출력된다. 창에서 "확인"을 클릭하면 웹 브라우저에 "Blue sky." 문자열이 출력된다.

    • ID를 사용한 Selection
      • HTML 페이지의 모든 element에는 고유 한 ID가 있다. element의 고유 Id를 사용하여 아래와 같이 element를 Selection 할 수 있다.

        • d3.select(“#<id of an element>”)

        HTML 문서에서 select() method를 사용하여 Id를 선택하는 예

        위 HTML 문서를 복사하여 select-id.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 alert 창이 열리고 "Blue sky." 문자열이 출력된다. 창에서 "확인"을 클릭하면 웹 브라우저에 "Blue sky." 문자열이 출력된다.


  • DOM Elements 추가하기
    • append() Method
      • 기존 HTML 문서에 새 요소를 추가하기 위하여는 D3의 Selection method를 사용하여 새 요소를 추가할 위치를 선택하고, append(), text() 등 Element를 추가하는 Method를 사용한다.
        • append() Method는 현재 선택된 Element의 Last child로 새 Element를 추가한다.

          • 기존 HTML 문서에 append() method를 사용하여 HTML Text를 추가하는 예

          위 HTML 문서를 복사하여 select-append.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "Appending HTML" 문자열이 출력되고, 다음 줄에 "First line", 그 다음 줄에 "Second line" 문자열이 출력된다.

      • Chrome의 "개발자 도구"를 이용하기
        • append() Method의 동작을 이해하기 위하여 Chrome의 "개발자 도구"(Debugging Tool)를 사용한다.

          • append() Method의 동작을 설명하기 위한 "개발자 도구" 실행 예

          • 위 그림의 좌측 창은 HTML 문서를 Chrome 브라우저에서 브라우징한 결과이다. append() method를 사용하여 HTML Text를 추가한 결과 "Appending HTML" 아래에 "First line"과 "Second line"이 출력되었다.
          • 우측 창은 Chrome의 "개발자 도구"의 "Elements" 창이다. Chrome 주소창 우측에 있는 "3개의 점 -> 개발자 도구 -> Elements"를 선택하면 "개발자 도구"의 "Elements" 창이 열린다. "Elements" 창에서 HTML 문서의 Elements(Javascript가 실행되어 추가된 Elements을 포함하여)를 확인할 수 있다.
          • "Elements" 창에서 JS Script에 의하여 추가된 <div> Tag와 HTML 문을 확인할 수 있다.
    • text() Method

        • 기존 HTML 문서에 새 Text를 추가하기 위한 Method 이다. 기존 HTML 문서에 새 Text를 추가하기위 하여는 D3의 Selection method를 사용하여 새 Text를 추가할 위치를 선택하고 text() Method를 사용하여 추가한다.

      • text()() Method
        • append() Method는 현재 선택된 Element의 Last child로 새 Element를 추가한다.

          • 기존 HTML 문서에 append() method를 사용하여 HTML Text를 추가하는 예

          위 HTML 문서를 복사하여 select-append-text.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "Blue sky." 문자열이 출력된다.


  • Elements 변경(Modifying)하기

      • D3.js는 선택한 Elements의 내용과 스타일을 수정하기 위해 html(), attr(), style()과 같은 다양한 Methods를 제공한다.

    • html() Method
      • html() Method를 사용하여 Paragraphs를 첨부하고 <span> tag를 사용하여 속성을 변경하는 예이다.

        • 위 HTML 문서를 복사하여 select-modify-html.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 출력되는 문자열 중 "blue" 가 blue color로 출력된다.

    • attr() Method
      • attr() Method를 사용하여 선택한 element의 속성(attribute)을 추가하거나 업데이트하는 예 이다.

        • 위 HTML 문서를 복사하여 select-modify-attr.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "The sky is blue today." 가 blue color로 출력된다.

    • style() Method
      • style() Method를 사용하여 선택한 element의 속성(property)을 변경하는 예 이다.

        • 위 HTML 문서를 복사하여 select-modify-style.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "Blue sky." 가 blue color로 출력된다.


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



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