D3.js 기본 틀

참조 : 시각화 문서 D3.js를 도전해보자

D3.js 버전5로 공부 시작

오래전 D3.js v4로 잠깐 기초를 독학했는데 이번에 v5로 기본틀을 다시 정리를 해보려고 하네요. 예전 post에서 "사각화 문서 D3.js를 도전해보자"에서 잠시 다루었는데 이번 post는 기본 틀 부터 해서 순차적으로 내용을 정리하여 간단히 post를 해볼까 합니다.

기본 틀

예제를 통해 간단히 살펴보겠습니다.

    var data = [1,2,3,4,5];
    
    //갱신
    var p = d3.select("body").selectAll("p").data(data)
           .text(function(d){return d;})
    //추가
        p.enter().append("p")
           .text(function(d){return d;})
    //종료
        p.exit().remove();

위 소스에서 보듯이 딱 3개의 구조로 이루어졌습니다.

갱신 : body라는 태그를 선택하고 그 위치에 있는 모든 p태그를 선택하라 그리고 data값을 text()함수를 통해 순서대로 출력한다.
추가 : 만약 선택된 태그가 3개이고 data가 5개인 경우 나머지 2개의 data는 갱신을 못시키기 때문에 추가부분에서 p태그를 append()함수로 추가하여 text()함수로 해당 새로운 p태그에 값을 text형태로 출력한다.
종료 : exit()종료하는데 remove()함수로 인해 만약 p태그가 7개이고 data 5개 일 때 나머지 2개는 제거 됩니다.

여기서, 태그는 body, p 태그로 실험했지만 다른 태그로 접근해서 실험을 하셔도 됩니다. 또, 디테일 접근으로 html문서의 태그 id, class로도 접근을 할 수 있습니다.

예제) p태그가 3개일 때

<body>
  <p>a</p>
  <p>b/p>
  <p>c</p>
<script src="https://d3js.org/d3.v5.min.js"></script>
  
<script>
    var data = [1,2,3,4,5];
    
    //갱신
    var p = d3.select("body").selectAll("p").data(data)
           .text(function(d){return d;})
    //추가
        p.enter().append("p")
           .text(function(d){return d;})
    //종료
        p.exit().remove();
</script> 
  
</body>

[결과] 기존 p태그에 1,2,3으로 갱신이 되고 새롭게 p태그 2개가 추가되어 총 5개의 값을 출력했네요.

**예제) p태그가 7개일 때 **

<body>
  <p>a</p>
  <p>b/p>
  <p>c</p>
  <p>d</p>
  <p>e</p>
  <p>f</p>
  <p>g</p>

<script src="https://d3js.org/d3.v5.min.js"></script>
  
<script>
    var data = [1,2,3,4,5];
    
    //갱신
    var p = d3.select("body").selectAll("p").data(data)
           .text(function(d){return d;})
    //추가
        p.enter().append("p")
           .text(function(d){return d;})
    //종료
        p.exit().remove();
</script>
  
  
</body>

[결과] : 데이터는 5개이고 그러면 선택된 p태그 7개에서 5개는 갱신이 되고 나머지 2개는 exit()종료하는데 나머지 remove()함수로 제거 되게 됩니다.

그리고, exit() 종료함수만 있고 remove()함수를 제거하면 아래와 같이 출력됩니다.

remove()함수에 대한 의미를 잘 이해하시면 됩니다.

정리

초반에 태그 위치 선택은 select(), 태그 범위 선택은 selectAll(), 선택 태그 범위의 출력 할 데이터은 data()함수로 사용합니다.
enter(), append() 아직 데이터가 남아 있을 때 나머지를 해당 태그를 추구할 때 사용하는 함수입니다.
오늘 post에서는 text()함수가 있는데 갱신과 추가 부분에 text() 함수가 표현 되었는데 갱신부분의 기존의 p태그와 추가부분의 새로운 p태그에 data값을 출력하는데 text()함수로 텍스트 형태로 출력시키는 문장입니다. 이 부분을 다른 형태로 하면 해당 행터로 값을 출력합니다. 기본 테스트 이기 때문에 text()함수를 사용한 것이고 원하는 형태로 출력하고자 할 때 이 부분을 잘 활용하여 응용하시면 됩니다.
마지막 종료부분은 exit()함수는 종료이고 remove()은 나머지 부분을 제거하는 함수입니다. remove()함수만 주의하면 기초적인 부분에서는 어려움이 없는 것 같아요.

코딩을 할 때 저 세부분의 영역으로 나눠서 코딩을 하면 됩니다. 기존의 태그에서 갱신이나 추가하고 싶을 때 해당 영역 위치에 원하는 동작 명령 코딩을 삽입만 하면 됩니다.
그리고 , 아래 변수 p로 선언하고 d3코딩을 저장했는데, p변수로 해당 명령 코딩을 접근하기 쉽게 하기 위해서 입니다. 여기서 d3로 동작시키고자 하는 해당 태그명을 변수명으로 하시면 나중에 변수명만 보면 어떤 태그에서 특정 동작이 이루어지는지 쉽게 구별할 수 있습니다. 변수명으로 의미를 잘 전달 할 수 있는 이름으로 지어주는게 좋습니다.

var p = d3.select("body").selectAll("p").data(data)
           .text(function(d){return d;})

위 코딩을 보면 p라는 변수명만 보면 p태그에서 뭔가의 동작을 수행했겠구나 하고 쉽게 식별이 됩니다. 나중에 여러 태그을 복합적으로 사용할 때 아주 좋습니다. 태그간 d3표현을 할 때 한쪽 태그에서 다른쪽 태그의 d3 동작을 가져올 때 해당 변수명으로 가져와서 접근하면 코딩 구별하는데 쉽고 코딩도 깔끔해집니다. 이부분은 자주 사용되는 표현이라 나중에 post에 담아보겠습니다.

D3.js 기본 틀 | Ecency