[D3.js] D3의 기본형식

d3.select("body").selectAll('')

- 조건과 일치하는 첫번째 DOM 문서요소의 참조를 반환한다.

- DOM에서 'body'를 찾고 'p' 엘리먼트를 모두 선택한다는 의미

 

.data(dataset)

- data() 메서드는 데이터 값이 몇 개 인지 계산하고, 파싱한다.

- dataset 변수에서 불러온 배열의 값이 5개이면, 다음 체인으로 연결된 모든 내용은 값마다 한번씩 총 5번 실행된다.

 

.enter()

- 불러온 데이터를 적용합니다.

- 이때 enter를 사용함으로써 DOM요소보다 데이터의 개수가 많은 경우 이름없는 요소들을 생성해서 데이터들을 동적으로 모두 표현할 수 있게 해준다.

 

.append('p')

- 위 enter()에서 생성된 이름없는 요소에 p태그를 사용한다는 의미입니다.

 

.attr('x', (v,i) => i)
.attr('class', 'bar')

- 각각의 요소에 속성을 추가한다.

 

.exit()

- DOM요소보다 데이터의 개수가 같아졌을 경우 추가로 생성된 요소들의 바인딩을 풀어준다.