d3.jsデータバインディングの更新

Question

d3.jsのデータバインディングについて明確に理解できないことがあります。

4つの番号が表示されている私は（それが hereを見つけることができます）簡単な例を設定している

：

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つの数字更新しようとすると：

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;}); 
} 

を

.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の故に必要はありません（）。（「テキスト」）を追加し

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;}); 

あなたは（draw1に以下の行を追加する必要があります）新しい

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

）バインディング私はあなたがより明確にプロセスを理解するため、次の例を参照することをお勧めします：あなたのコメントについて https://bl.ocks.org/mbostock/3808218