[d3] 객체 속성(크기, 색깔)을 데이터에 맞게 업데이트 및 조정하기 (enter, update, exit)

[d3] 객체 속성(크기, 색깔)을 데이터에 맞게 업데이트 및 조정하기 (enter, update, exit)

- 영어검색: How to update object / DOM 

- 쉽게 말하면

- enter()은 데이터 최초로딩 시 + 추가된 데이터(row)가 있을 때

- update는 기존에 로딩된 데이터에 변동이 있을 때  (별도의 함수가 없음)

- exit()은 삭제된 데이터(row)가 있을 때

- SELECTED DOM + enter, update, exit + attribute 의 형식이다

- 선택한 객체에 적용하고 싶은데

- 데이터의 추가/업데이트/삭제 시에 그것을 객체에 반영하겠다

- 단 이러이러한 attribute을 업데이트하고 싶다

- transition과 물려서 자연스러운 효과를 낸다

var circle_array = d3.selectAll(".circle").data(data);

// 최초로딩 + 추가데이터 관할

circle_array.enter()

.append("circle")

.attr("cx", 100)

.attr("cy", function(d, i){

return (i + 1)*100

})

.attr("r", 0)

.attr("fill", "#78AB46")

.transition()

.duration(1500)

.attr("r", function (d){return d;});

// 별도의 함수 없이, 업데이트된 데이터가 들어오면 다음 코드를 통해 업데이트를 해준다

circle_array.transition()

.duration(1500)

.delay(1500)

.style('fill', 'steelblue')

.attr('r', function (d){

return d;

});

// 삭제된 데이터가 있을 때 해당객체를 지워준다

circle_array.exit()

.transition().duration(1500).delay(1500)

.style("fill", "red")

.transition().duration(1500).delay(3000)

.attr("r", 0).transition().remove();