D3 데이터 조인

데이터 조인이란?

• 데이터를 무언가와 결합하는 것
• DOM element 를 대상으로 만든 Selection 에 Data 를 결합시키는 것
• 활용 측면에서 enter, update, exit 의 세가지의 데이터 조인이 있다.
  enter: 새로운 데이터가 추가될 때, selection 에 해당 데이터를 바인딩하는 신규 요소에 대한 동작
  update: 기존에 존재하고 있는 요소에 대한 업데이트 동작
  exit: 더이상 유효하지 않거나, 필요가 없는 기존 요소들을 처리하는 동작

selection.join

• 신규 요소를 추가하거나, 필요없는 기존 요소를 제거, 신규요소 + 유효한 기존 요소를 정렬하여 반환하는 기본 동작을 가진다.
• selection.join(enter[, update][, exit])
  cf) selection.data(data[, key]) ... 데이터를 바인딩
• 데이터마다 변해야하는 속성에 대해서는 익명 함수를 사용해야 한다.

Key 함수

• D3 가 데이터의 각 항목을 각각의 selection 에 join 하는 과정에서 어떤 데이터 포인트를 어떤 selection 에 join 할지 요소를 직접 지정하지 않아도 자동으로 지정된다.
  D3 가 임의로 배열 순서대로 selection 과 data 를 mapping 시켜놓았기 때문
  이를 key 함수를 통해 직접 지정할 수 있다.
• key 함수
  selection 에 data 를 결합하는 방법을 설명한다.
  key 는 식별자 역할을 하며, selection 의 객체 불변성을 유지하면서 새로운 데이터로 업데이트 할 수 있다.
  

---

회고

key 함수에 들어서면서 조금 복잡해짐을 느끼긴 했지만, 다행히 왜 필요한지는 인지하고 있기 때문에 덜 어렵게 느껴지는 것 같았다.
실제로 한번씩 구현해봐야 익숙해질 것 같다!