d3.js 데이터 바인딩 업데이트

Question

d3.js의 데이터 바인딩에 대해 명확하게 이해하지 못하는 사항이 있습니다.

나는 4 개 개의 숫자가 표시되는 간단한 예제 (즉 here을 찾을 수 있습니다) 설정 한 :

function draw1(){ 
svg.selectAll("text").data(data1) 
     //.enter().append("text") /* if not commented does nothing*/ 
     .text(function(d){return d;}) 
     .attr("x",function(d,i){return position[i][0]+30;}) 
     .attr("y",function(d,i){return position[i][1]+30;}); 
} 

:

var data0 = [1, 2, 3, 4]; 
var data1 = [5, 6, 7,8]; 
var data2 = [10, 11,12]; 

var lgth = 100; 
var wdth = 50; 
var position = [[0,0],[0,wdth], [lgth,0],[lgth,wdth]]; 

var svg = d3.select("#test").append("svg") 
      .attr("width", wdth+100) 
      .attr("height", lgth+100); 

svg.selectAll("text").data(data0) 
     .enter().append("text") 
     .text(function(d){return d;}) 
     .attr("x",function(d,i){return position[i][0]+30;}) 
     .attr("y",function(d,i){return position[i][1]+30;}); 

그러나 내가 그 기능을 사용하여 이러한 4 개 개의 숫자를 업데이트 할 때를

은 .enter().append("text")이 주석 처리 된 경우에만 작동합니다. 왜 ? 이전 바인딩보다 새로운 바인딩에 더 적은 데이터가 있다면 어떻게 될까요?

미리 감사드립니다. 필요에 따라

Answer 1

svg.selectAll("text").data(data0) 
    .enter().append("text") 
    .text(function(d){return d;}) 
    .attr("x",function(d,i){return position[i][0]+30;}) 
    .attr("y",function(d,i){return position[i][1]+30;}); 

.enter(). 추가 ("텍스트") 새로운 요소를 생성합니다. 여기이 경우에 두 배열 데이터 0과 데이터 1의 요소 수가 같으므로 새 텍스트 요소가 필요하지 않습니다. d3은 값을 업데이트합니다. 따라서 .enter()의 필요가. 당신이 적은 데이터가있는 경우 (오래된 요소를 제거 할 종료에 대한 draw1()에 다음 줄을 추가해야

svg.selectAll("text").data(data1) 
    .text(function(d){return d;}) 
    .attr("x",function(d,i){return position[i][0]+30;}) 
    .attr("y",function(d,i){return position[i][1]+30;}); 

("텍스트")를 추가하지 새로운

svg.selectAll("text").exit().remove() 

) 바인딩 난 당신이 더 명확 과정을 이해하기위한 다음의 예를 참조하는 것이 좋습니다 : 귀하의 코멘트에 대한 https://bl.ocks.org/mbostock/3808218