Wie aktualisiere ich Daten in D3 Version 4?

Question

Ich habe die folgenden Beispieldaten.

var d1 = [11,18,20]; 
var d2 = [11,11,20]; 

Ich versuchte mit Methoden enter() und exit() aber Update funktioniert nicht? bitte hilf mir.

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

var rect = svg.selectAll("rect"); 

     rect 
     .data(d1) 
     .enter().append("rect") 
       .attr("height",function(d,i){ return d*15; }) 
       .attr("width","50") 
       .attr("fill","pink") 
       .attr("x",function(d,i){ return 100*i; }) 
       .attr("y",function(d,i){ return 300-(d*15); }); 

Answer 1

Update-Muster wurde in d3v4 geändert. Von changelog:

Zusätzlich selection.append nicht mehr übergeht Knoten in die Update Auswahl eingeben; Verwenden Sie selection.merge, um die Eingabe nach einem Datenbeitritt zu kombinieren und zu aktualisieren.

Sie haben Ihren Code neu zu schreiben:

var rect = rect.selectAll("rect") 
    .data(d1) 

rect 
    .enter().append("rect") 
    .merge(rect) // <== !!! doing merge here 
    .attr("height",function(d,i){ return d*15; }) 
    .attr("width","50") 
    .attr("fill","pink") 
    .attr("x",function(d,i){ return 100*i; }) 
    .attr("y",function(d,i){ return 300-(d*15); });