JS와 D3를 이용한 시각화(Visualization): d3-data-binding

D3.js - Data Binding

Data Binding

Data Binding 개요
data() method
enter() method
exit() method
datum() method

D3.js - Data Binding 관련 페이지 보기

Data Binding

이 페이지에서는 데이터를 DOM 요소(Elements)에 바인딩하고 데이터를 기반으로 새 Elements를 만드는 방법을 소개한다.

Data Binding 개요

D3는 데이터 바인딩을 위하여 다음과 같은 Methods를 사용한다.

data(): 선택한 Elements에 데이터를 결합(Binding)한다.
enter(): 테이터의 수가 선택된 Elements 보다 많아 결합에 사용되지 않은 데이터가 있는 경우 현재 선택된 Elements를 참조하여 데이터 결합에 필요한 Elements를 생성한다.
exit(): 선택된 Elements 수가 데이터 수 보다 많아 결합되지 않은 Elements가 있는 경우 나머지 Elements를 종료 상태로 설정한다. 종료 상태의 Elements는 remove() Method를 사용하여 DOM에서 제거할 수 있다.
datum(): 선택한 요소(Elements)에 datum의 데이터를 삽입한다

data() method

data() 함수는 인수로 전달된 데이터 배열을 선택한 DOM 요소(Elements)에 결합하고 업데이트 된 결과를 Return 한다. D3는 Array, CSV, TSV, JSON, XML 등과 같은 다양한 유형의 데이터를 사용할 수 있다.
data() 함수에 값(Values)의 배열(숫자 or 객체) 또는 데이터 함수를 전달할 수 있다.
data()와 enter Method의 동작을 설명하기 위한 예. enter() Method는 다음 절에서 설명함.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>
  <body>
    <h3>D3 data binding</h3>
    <script>
      let theData = ["A", "B", "C"];
      // select("body") 함수는 HTML <body> Tag를 선택한다.
      // selectAll("p")함수는 현재 선택할 수 있는 <p> Tag가 없기 때문에 Empty selection를 Return 한다.
      // 이 경우 이 Selection의 Parent node는 <body> 이다.
      d3.select("body").selectAll("p")
        // data() 함수에 인수로 배열(theData)를 전달한다.
        // 전달된 데이터 배열을 선택한 DOM Element에 바인딩 하고 업데이트 된 결과를 반환한다.
        // 이 경우에는 바인딩 할 선택된 요소가 없기 때문에 3개의 Virtual selections을 Return 한다.
        .data(theData)
        // enter() 메서드는 data()의 Virtual selections와 연관하여 Virtual enter selection을 Return 한다.
        // Virtual enter selection에는 append() 메서드로 DOM Element를 추가할 수 있다.
        .enter()
        // Virtual enter selection에 <p> Elements(Tags)를 추가한다.
        // DOM Element에 3개 Elements가 바인딩 되었기 때문에 
        // 이후의 Code는 DOM Element의 모든 Element에 대하여 실행(이 예에서는 3회)된다.
        .append("p");
    </script>
  </body>
</html>

위 HTML 문서를 복사하여 d3-data-bind-p-tag.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 "D3 data binding" 만 출력된다. data()와 enter Method의 동작을 보기 위하여는 아래와 같이 Chrome "개발자 도구"를 이용하여야 한다.

data()와 enter Method의 동작을 이해하기 위한 "개발자 도구" 실행 예

윗 그림은 Chrome의 "개발자 도구"의 "Elements" 창이다. Chrome 주소창 우측에 있는 "3개의 점 -> 개발자 도구 -> Elements"를 선택하면 "개발자 도구"의 "Elements" 창이 열린다.
"Elements" 창에서 Script에 의하여 추가된 3개의 <p> Tag(Eements)를 확인할 수 있다.
<p> Tag(Eements)는 append("p")가 배열의 요소 수(이 예에서는 3개) 만큼 실행되기 때문에 3번 추가되었다.

data() 함수를 사용하여 배열 데이터를 기존 DOM 요소에 결합하는 예

위 HTML 문서를 복사하여 d3-data-join.html 파일을 만들고 실행(더블 클릭)하면 웹 브라우저에 selectAll()에 의하여 선택된 paragraph이 하나 이기 때문에 "Blue sky."만 출력된다. "Green forest" 이 출력되기 위하여는 paragraph(<p> </p>)이 하나 더 필요하다. 이 문제를 해결하기 위하여 아래에서 설명하는 enter() Method 가 필요하다.

data() 함수를 사용하여 배열 데이터를 기존 DOM 요소에 바인딩하는 동작을 설명하기 위한 "개발자 도구" 실행 예

"Elements" 창에서 Script에 의하여 대치된 <p>Blue sky</p>를 확인할 수 있다.
이 예에서는 <p> Tag(Eements)가 하나이기 때문에 하나의 myData 배열의 첫번째 Eement("Blue sky")만 바인딩 되었다.

Array data를 여러 Elements에 바인딩 하는 예

<!doctype html>
<html>
<head>
  <script src="http://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  
  <p>D3 Join data</p>
  <p> </p>
  <p> </p>
  <script>
    // 배열 myData는 3개의 Elements를 갖고 있다.
    let myData = ["Blue sky", "Green forest", "Brown ground"];
    d3.select("body")
      // 3개의 <p> Element가 모두 선택(selectAll)된다.
      .selectAll("p")
      // data() 함수에 인수로 배열(Array) myData를 전달한다.
      // 전달된 데이터 배열을 선택된 DOM Element에 바인딩하고 업데이트 된 선택을 반환한다.
      // 이 경우 선택된 DOM Element(<p> Tag)가 3개 이기 때문에 
      // 3개의 배열 Element가 DOM Element에 바인딩 된다.
      .data(myData)
      // DOM Element에 바인딩 된 배열 Element 수 만큼 이후의 Method가 실행된다.
      // 이 예에서는 바인딩 된 배열 Element 수 가 3개 이기 때문에 text() 함수가 3회 실행된다.
      // 각 배열 값은 text function에 인수로 전달된다.
      // text() 함수는 return된 데이터를 선택된 DOM Element에 Text로 바인딩 한다.
      // 배열 값이 순차적으로 3회 전달되기 때문에 모든 배열 값이 브라우저에 출력된다.
      .text(function (d) {
                 return d;
            });
    </script>
</body>
</html>

위 HTML 문서를 복사하여 d3-data-join-multi-element.html 파일을 만들고 실행(더블 클릭)하면 3개의 <p> Elements에 Data(문자열)가 각각 Join 되어 웹 브라우저에 "Blue sky", "Green forest", "Brown ground" 문자열이 출력된다.

Array data를 여러 Elements에 바인딩 하는 동작을 설명하기 위한 "개발자 도구" 실행 예

"개발자 도구 -> Elements" 창에서 Script에 의하여 대치된 <p>Blue sky</p>, <p>Green forest</p>, <p>Brown ground</p>를 확인할 수 있다.

enter() method

위의 예에서 data() 함수가 Selection elements(nodes) 와 배열 값을 일대일 매핑(one on one mapping) 결합하는 것을 보았다. 그러나 만약 elements(nodes) 수와 데이터 값이 일치하지 않는 경우에는 select() 및 selectAll() 만 사용하여 elements(nodes) 와 배열 값을 일대일 매핑할 수 없다. 이러한 문제를 해결하기 위하여 enter() method 가 필요하다.

enter() method는 데이터 값 수에 해당하는 elements(nodes)를 참조할 수 있는 참조자(Placeholder references)를 동적으로 생성한다.
enter()의 출력은 append() method에 제공될 수 있고, 이 경우 append() method는 페이지에 해당하는 DOM 요소가 없는 DOM 요소를 생성한다.
enter() method를 사용하여 배열 Data를 Binding 하는 예

위 HTML 문서를 복사하여 d3-array-data-binding.html 파일을 만들고 실행(더블 클릭)하면, enter()가 6개의 span을 생성하고 append는 6개의 span를 body Elements에 추가 하기 때문에 6개의 데이터 값이 모두 출력된다.

enter() method를 사용한 배열 Data의 Binding을 설명하기 위한 "개발자 도구" 실행 예

"개발자 도구 -> Elements" 창에서 Script에 의하여 바인딩된 <span>A </span>, - - - <span>F</span>를 확인할 수 있다.

span Tag와 style() 함수을 이용하여 홀수 숫자는 이면 적색, 짝수는 청색으로 출력하는 예

위 HTML 문서를 복사하여 d3-color-number.html 파일을 만들고 실행(더블 클릭)하면, 홀수 숫자는 적색, 짝수는 청색으로 출력된다.

span Tag와 style() 함수을 이용하여 홀수 숫자는 이면 적색, 짝수는 청색으로 출력하기 "개발자 도구" 예

"개발자 도구 -> Elements" 창에서 Script에 의하여 바인딩된 <span> Tag와 style 속성이 추가된 숫자를 확인할 수 있다.
"개발자 도구 -> Elements" 창에서 <script> 열에 있는 삼각형을 클릭하면 Script code가 확장된다.

2차원 matrix Data 예

<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v6.min.js"></script>
</head>
<body>

위 HTML 문서를 복사하여 d3-matrix-data.html 파일을 만들고 실행(더블 클릭)하면 Table에 Matrix[3 x 3]가 출력된다.

2차원 matrix Data "개발자 도구 -> Elements" 창 예

"개발자 도구 -> Elements" 창에서 Script에 의하여 바인딩된 Table를 확인할 수 있다.

아래 그림은 프로그램의 동작을 이해하기 위한 Chrome의 개발자 도구 Console 창(console.log()에 의하여 출력되는 메세지를 보는 창)이다. 이 창은 Chrome 브라우저에서 "도구 더보기 -> 개발자 도구"에서 Console을 선택하면 볼수 있다.

Chrome의 개발자 도구 Console 창

위에서 Inner array data()는 td를 선택한 후 data()에서 매개 변수로 함수를 지정하였다. tr.selectAll("td")은 각 tr의 선택에 대해 다중 td를 return 하기 때문에 다중 <tr> <td> </td> </tr> 그룹을 형성한다. 그 결과 console.log(d)는 배열의 row 2차원 배열의 첫번째 element를 반환한다.

위에서 text()의 Text는 text(function(d))의 매개 변수 d는 이전 data() 함수에서 반환 된 row의 단일 요소이다. function(d)는 배열의 첫번째 element를 반환하기 때문에 1에서 9 까지의 문자가 출력된다.

exit() method

enter()는 새로운 참조 노드(Reference nodes)를 추가하는 데 사용되고, exit는 노드를 제거하는 데 사용된다.

exit()를 사용하면 바인딩 되지 않은 요소(elements)는 종료 단계로 들어간다.
remove()는 DOM에서 '종료 된' 노드를 모두 제거한다.
exit()과 remove() method를 사용하여 모든 p 요소를 제거 하는 예

위 HTML 문서를 복사하여 d3-exit-remove-p.html 파일을 만들고 실행(더블 클릭)하면, HTML 문서에는 세 개의 <p> 요소가 포함되어 있지만 데이터 배열에는 하나의 데이터 값만 포함되어 있기 때문에 첫번째 <p> 요소의 "D3 Tutorials" 만 "Blue sky"로 대치되고 나머지 <p> 요소는 exit()과 remove() method에 의하여 제거된다. 브라우저에는 "Blue sky"가 출력된다.

아래는 Chrome의 개발자 도구의 Elements 창이다.

첫번째 <p> 요소만 데이터("Blue sky")가 바인딩 되고, 바인딩 되지 않은 <p>(elements)는 모두 제거되었다.

datum() method

datum() 함수는 업데이트가 필요없는 정적 시각화에 사용된다. 데이터를 요소에 직접 바인딩한다.
datum() 함수를 사용하여 데이터를 선택된 요소에 직접 바인딩 하는 예

위 HTML 문서를 복사하여 d3-datum-method.html 파일을 만들고 실행(더블 클릭)하면, 선택된 요소에 데이터("Blue sky")가 직접 바인딩되어 브라우저에는 "Blue sky"가 출력된다.

D3.js의 이해와 사용을 위한 준비 관련 페이지 보기