D3는 그림 위에 그림을 그린다.

날짜 : 2017. 11. 29.(수)

D3는 그림 위에 그림을 그린다.

1. 생각하게 된 동기

1. 프로젝트 사용할 D3 챠트 학습

2. 알게된 점

일반적인 D3 처리과정

로딩, 측정, 생성, 갱신

용어정리

enter, update, exit
DOM처리
event처리

1. enter, update, exit

   • 'svg'와 데이터를 연결을 하고 속성값을 주어야 화면에 나타나게 되는데, 이를 bind 라고 한다.
   • enter는 처음 데이터를 연결할때, update는 값을 변경해야 할때, exit는 값을 제거할 때 사용한다. (더 상세한 설명은 아래의 블로그를 참조해 주시기 바랍니다.)

2. DOM처리

   • ineraction 처리를 위해서 css 속성값 변경 및 DOM 추가 및 제거 등의 작업을 할 수 있다

3. event 처리

   • 웹의 이벤트 처리와 동일
   • 해당 이벤트 원하는 자료를 어떻게 만들어서 바인딩 시킬 것인지가 키포인트

참고한 사이트

• Understanding selectAll, data, enter, append sequence in D3.js
• when-to-use-duration-vs-delay-in-d3
• ENTER/UPDATE/EXIT