데이터 조인이란?

---

• 데이터를 무언가와 결합하는 것

• D3.js에서는 DOM Element, Selection, Data가 결합되는 것을 말한다.

데이터 조인 개념

---

Enter

새로운 데이터가 추가될 때, 해당 데이터를 바인딩 하는 새로운 요소에 대한 동작

• 새로운 데이터가 추가됐을 때의 동작을 정의한다.

Update

기존에 존재하던 요소의 변경에 대한 동작

• 기존 데이터가 변경될 때의 동작을 정의한다.

Exit

더 이상 필요하지 않은 요소들을 처리하는 동작

• 유효하지 않거나 필요가 없어진 데이터를 제거할 때의 동작을 정의한다.

메서드

---

selection.data

selection.data([data[, key]])

• data를 지정하지 않은 경우, 해당 Selection의 데이터 배열을 반환한다.

• 원하는 데이터 배열을 data에 넣으면, 데이터의 수 만큼 Selection에 해당 데이터가 바인딩 된다.

• 바인딩 되면 실제로 Element가 생성되는 것은 아니고, 데이터의 길이만큼 Empty Selection이 생성된다.

• key 함수를 통해 데이터 조인을 할 때 식별자를 지정할 수 있으며, key 함수는 각 데이터 포인트를 매개변수로 받는다.

• key를 지정하지 않으면 기본적으로 배열의 index를 기준으로 데이터를 join한다.

selection.join

selection.join(enter[, update][, exit])

• enter, update, exit 각각 함수이지만, enter는 예외적으로 문자열로도 지정이 가능하다.

• exit과 update는 지정하지 않아도 자동으로 호출되며, enter를 문자열로 지정했다면 아래처럼 동작한다.

selection.join(
    enter => enter.append("enter string // circle, rect, text..."),
    update => update,
    exit => exit.remove()
)

• selection.join의 호출 결과는 병합된 enter와 update Selection을 정렬하여 반환한다.

참고 자료

d3-selection #joining-data