D3.js 데이터 조인

데이터 조인

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

 

Enter, Update, Exit라는 개념이 있는데

인터렉티브 시각화에서 많이 사용한다.

 

 

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

- 신규 요소를 추가

- 필요없는 기존 요소는 제거

- 반환 할 땐, 신규요소 + (유효한) 기존 요소를 정렬하여 모두 반환

- update와 exit도 가능해서 애니메이션이나 추가, 제거 시 다른 동작을 설정, 기존 요소 업데이트 등이 가능하다.

 

예제

svg.selectAll("rect")

현재 svg요소안에 아무것도 없는 상태라고 가정하고 위 명령어를 실행하면

빈 배열을 가지고 오게 된다.

그럼 데이터를 바인딩해보자

svg.selectAll("rect")
      .data(orgData)

그렇지만 아직까지 실제 요소가 만들어진 것은 아니다.

데이터 length만큼 자리만 차지하고 있는 empty selection으로 구성된다.

 

데이터 바인딩까지 했다면 데이터 조인 마지막을 완성시키는 것이 selection.join() 메서드이다.

svg.selectAll("rect")
      .data(orgData)
        .join("rect)

- 신규 rect 요소를 추가해서 enter.append("rect")를 하게 된다.

 

데이터의 개수만큼 일일이 rect요소를 추가하는 게 아니라

데이터 바인딩하고, 

추가할 요소를 join메서드의 enter로 작성하면 끝이 난다.

 

만약 여기에 아래와 같이 변경된 twoData를 넣어보자

svg.selectAll("rect")
      .data(twoData)
        .join("rect")

그럼 위와 같이 메서드를 작성하면 된다.

join메서드가 알아서 유지되는 요소는 유지해 주고,

추가할 요소는 추가하고,

삭제할 요소는 삭제한다.

 

join메서드에 함수를 넣어서 작성할 수도 있다.

svg.selectAll("rect")
      .data(twoData)
        .join(
        	enter => enter.append("rect")
                              .attr("fill","green")
        )

- 신규 rect요소(초록색)가 추가된다.

- 새로 추가하는 요소에 원하는 속성이나 css를 추가할 수 있다.

 

2. selection.join(update)

update는 기존 요소의 대한 업데이트를 동작한다.

현재 기존에 twoData에서 fourData가 넣어지는 상황이다.

svg.selectAll("rect")
      .data(fourData)
        .join(
            enter => enter.append("rect")
                              .attr("fill","green")
            update=> update.attr("fill","orange")
        )

위와 같이 구성하게 되면

신규 요소(초록색)가 추가되고,

기존 요소는 업데이트(주황색)로 적용된다.

 

 

 

3. selection.join(exit)

exit는 유효하지 않은 기존 데이터 요소를 처리하는 동작이다.

현재 기존 fourData에서 twoData가 다시 넣어지는 상황이다.

svg.selectAll("rect")
      .data(twoData)
        .join(
            enter => enter.append("rect")
                              .attr("fill","green")
            update => update.attr("fill","orange")
            exit => exit.attr("fill","blue").remove()
        )

위와 같이 구성하게 되면

유효하지 않은 기존 데이터 요소를 

blue로 변경하면서 제거하게 된다. (눈으로 파란색이 보이지는 않음)

 

원래는 exit메서드를 따로 명시하지 않아도 join메서드가 알아서 기존 데이터를 제거한다.

그렇지만 제거할 때 전환되는 설정이나 속성을 넣어주고 싶을 때 사용한다.

 

exit 함수를 작성할 때 주의해야 할 점은 제거할 때 명시적으로 작성해야 한다.

그래서 함수 반환 마지막에는 remove() 메서드를 작성해야 한다.

 

 

데이터 조인 활용

속성을 정의할 때 데이터 값에 따라 변해야하는 속성이 있을 것이다.

barGroup.selectAll("rect")
        .data(data)
        .join("rect")
        .attr("x",0)
        .attr("height",barHeight)
        .attr("y",?)
        .attr("width",?)

현재 위에서는 y값과 width를 그렇게 하고싶다.

barGroup.selectAll("rect")
        .data(data)
        .join("rect")
        .attr("x",0)
        .attr("height",barHeight)
        .attr("y",(d,i)=>{return i*barSpacing})
        .attr("width", (d)=>{return d})

D3에서는 위와 같이 익명함수로 사용하면된다.

d는 데이터를 뜻하고

i는 인덱스를 뜻한다.

 

 

데이터 조인 Key 함수

반드시 알아둬야할 개념이다.

D3가 각 항목을 자동으로 알아서 넣게된다.

조인하는 과정에서 어떤 데이터 포인터를 어떤 selection에 넣어야할 지 for문으로 일일이 요소를 지정하지않아도 자동으로 지정되었다.

보통은 배열이 인덱스 순서대로 selection과 데이터를 매핑시켜놓는다.

이 부분을 D3가 자동으로하는 것이 아니라 우리가 지정할 수 있다.

 

Key 함수

• Selection에 데이터를 결합하는 방법을 설명함
• Selection의 객체 불변성을 유지하면서 새로운 데이터로 업데이트 할 수 있음
• Key = 식별자

selection.data(fourData, d => d.name)

key값은 데이터의 name속성으로 지정된다.

name 속성을 기준으로 매핑된다.

만약 key함수를 지정하지 않으면 default로 배열 요소의 index로 설정된다.

요소를 필터링하거나, 추가 제거, 정렬과 같이 인터렉티브하게 할 때 유용하다.