Interactive General Update Pattern

Interactive General Update Pattern

d3.js를 사용하면서 data에 의해 interactive하게 움직이는 모습을 보려면

Enter, Exit, Update 패턴이 중요하다.

코드 중 계속해서 호출되며 반복적으로 그리는 함수 내에

.data()로 묶여 있는 enter와 update가 있을 경우 

enter는 처음 나타난 데이터 셋에 대해서

update는 기존의 데이터와 동일한 데이터 셋에 대해서

exit는 기존의 데이터에서 사라진 데이터 셋에 대해서

각각 transition을 넣을 수 있도록 패턴화 했다.

아래와 같은 패턴을 이용하면 적재적소에 transition을 넣을 수 있는 가독성이 확실히 좋아진다.

function plot(data){

var update = svg.selectAll('circle')

                      .data(data);

var enter = update.enter()

                         .append('circle');

var exit = update.exit();

update.style('fill','black');

enter.style('fill','green');

exit.style('fill','red')

    .remove();

update.merge(enter)

          .call(pulse);

}

function plot(data){

var update = svg.selectAll('circle')

                         .data(data);

var enter = update.enter()

                             .append('circle');

var exit = update.exit();

//기존 데이터와 동일한 데이터 셋들에 아래와 같이 opacity style이 0 -> 1로 transition을 적용할 수 있다.

update.style('fill','black')

           .style('opacity',0)

           .transition()

           .style('opacity',1);

//기존 데이터와 다르게 새롭게 나타난 데이터 셋들에 아래와 같이 opacity style이 0 -> 1로 transition을 적용할 수 있다.

enter.style('fill','green')

         .style('opacity',0)

         .transition()

         .style('opacity',1);

//기존 데이터와 다르게 사라진 데이터 셋들에 아래와 같이 opacity style이 1 -> 0로 transition을 적용할 수 있다.

exit.style('fill','red')

      .transition()

      .style('opacity',0);

      .remove();

//아래의 merge 함수를 이용하여 각 select된 elements를 병합하여 한꺼번에 transition을 적용할 수 있다.

update.merge(enter)

          .call(pulse);

}

아래의 그림은 기존에 바인딩 된 데이터 셋이 B,C,E,F,H 였는데

새롭게 바인딩 된 데이터가 C,D,F 이고

따라서 enter에 의해 D가 녹색, update에 의해 C,F가 검정색, 그리고 exit에 의해 사라질 B,E,H가 빨간색으로 표시된 순간이다.

이후에 remove에 의해 B,E,H가 삭제될 것이다.

 

출처: https://bl.ocks.org/cmgiven/32d4c53f19aea6e528faf10bfe4f3da9