FrontendLibraryD3.js

D3.js Select

D3.js select API

d3.js 에서는 일반적으로 메서드 체이닝 기법을 사용한다. jQuery의 select API 문법과 흡사하지만 d3에서는 selection 객체에 대해서 data()를 통해 특정 데이터를 바인드하고, enter()와 exit()를 통해 데이터에 대응하는 객체를 다룰 수 있는 기능들을 제공한다

select API

  • select() - 현재 문서에서 시각화할 특정요소 태그 하나를 선택
  • selectAll() - 현재 문서에서 특정 태그 전체를 선택
  • attr() - 선택된 태그의 속성값 지정
  • data() - 참조 연결한 데이터 가져옴(선택된 태그에 데이터 매칭)
  • enter() - 데이터 갯수만큼 태그가 부족할 시에 플레이스홀더를 반환
  • append() - 새로운 태그를 추가
  • exit() - 종료(더 이상 필요없는 태그는 반환)
  • remove() - 현재 문서에서 선택된 태그를 제거

데이터 바인드하고 요소 추가하기

1
2
3
4
5
6
7
8
9
10
11
var data = [1, 2, 3, 4, 5];

var $p = d3.select('body') // 부모 태그 셀렉터
    .selectAll('p') // 부모 태그 하위 요소인 p 태그 전체 선택
    .data(data); // 선택된 p 태그들에 대해 data 변수로 선언한 데이터 바인딩 연결(5개의 데이터를 body안에 있는 p태그를 포함해서 사용한다는 의미)
  
$p.enter() // 바인드된 데이터들 중에 아직 실제 문서 요소를 가지지 못 하는 것들을 찾아내서 가상의 객체로 만들어 반환(body 안에 이미 p태그가 3개가 있다면 나머지 2개의 데이터를 사용할 가상영역이 생성되야 하는데 그 역활을 수행)
  .append('p'); // 실제 가상 영역에 p태그를 삽입(body 안에 만들어진 p태그가 5개가 안되면 여기서 추가로 가상영역의 갯수만큼 p태그를 생성한다.)
  
$p.exit() // 종료
    .remove(); // 데이터 갯수 이상 매칭된 요소 삭제(body안의 p 태그가 데이터 보다 많을시 반환되지 않고 제거)

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p>a</p>
<p>b</p>
<p>a</p>

<script>
var data = [1, 2];

var $p = d3.select('body').selectAll('p')
    .data(data)
    .text(function(d) {
        return d;
    });
  
$p.enter().append('p')
    .text(function(d) { // 이미 존재하는 요소에 대해서 enter() 메서드를 사용하면 이를 조작할 수 없다는 의미가 된다. 이 때는 selectAll() 이후, 혹은 data() 메서드로 데이터 바인드 이후 text() 메서드로 반환되는 결과를 바로 조작하면 된다.
        return d;
    });    
$p.exit().remove();
</script>

//ouput
1
2

body 안에 p 태그가 이미 3개 존재한다. 하지만 데이터 갯수는 2개이다. 실질적으로 연결되는 값은 [1,2]인 두개뿐이다. 세본째 p태그는 사용되지 않고 그대로 유지된다. 여기서 remove() 로 사용되지 않는 p태그가 제거 된다.

참조

공유하기