D3 Javascript：要素の削除と更新

Question

私はupdate（）の呼び出しでsetInteval（）関数を使用する単純な数値のリストを持っています。各呼び出しの後に番号を削除する代わりに、それを追加するだけです。私はd3.select（ "g"）。remove（）を使ってみましたが、どちらもうまくいきませんでした。誰かがこれを説明し、enter（）メソッドとexit（）メソッドについて説明することができますか？

var svg = d3.select("#first").append("svg") 
    .attr("width",500) 
    .attr("height", 500); 

function update(data) { 

    var text = svg.select("g") 
    .data(data); 

    text.enter() 
    .append("text") 
    .text(function(d) { 
    return d; 
    }); 
    text.exit().remove(); 
} 



setInterval(function() { 
    var data = []; 
    for (var i = 0; i < 5; i++) { 
    data[i] = Math.round(Math.random() * 10); 
    } 
    console.log(data); 
    update(data); 
}, 2000); 

Answer 1

ここでの問題は、（それに加えて、あなたはSVGに正しくテキストを追加していないので、私はあなたのコードを少し変更）別の「入力」と「更新」の選択の欠如です。

ここでは、データバインド：

var text = svg.selectAll(".myText") 
    .data(data); 

を、これはあなたの「終了」を選択します（data.lengthは常に同じであるように、あなたも、この選択は必要ありません）です：

text.exit() 
    .remove(); 

変更になりました。これは、（あなたdata.lengthは常に5であるとしてのみ関数を呼び出す初めて作品「入力」、再び）あなたの選択を入力します：

text.enter() 
    .append("text") 
    .attr("class", "myText") 
    .attr("x", function(d,i){ return 20 + i*16}) 
    .attr("y", 20); 

そして、これはあなたの更新の選択である：

text.text(function(d) { 
    return d; 
}); 

ここでは作業コードは次のとおりです。

var svg = d3.select("body").append("svg") 
 
    .attr("width",200) 
 
    .attr("height", 100); 
 

 
function update(data) { 
 

 
    var text = svg.selectAll(".myText") 
 
    .data(data); 
 
\t 
 
\t text.exit().remove(); 
 

 
    text.enter() 
 
    .append("text") 
 
\t .attr("class", "myText") 
 
\t .attr("x", function(d,i){ return 20 + i*16}) 
 
\t .attr("y", 20); 
 
\t 
 
\t text.text(function(d) { 
 
    return d; 
 
    }); 
 
    
 
} 
 

 

 

 
setInterval(function() { 
 
    var data = []; 
 
    for (var i = 0; i < 5; i++) { 
 
    data[i] = Math.round(Math.random() * 10); 
 
    } 
 
    update(data); 
 
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

PS：私はここでD3 v3を使用しています。