refactor d3 v3 pie auf Version 4 unerwarteten Verhalten

Question

Beispielcode Update:

var updateChart = function(dataset) { 
arcs = arcs.data(donut(dataset), d => d.data.label); 

arcs.exit().remove(); 

arcs.enter().append("path") 
.attr("stroke", "white") 
.attr("stroke-width", 0.8) 
.attr("fill", function(d, i) { 
    return color(i); 
}).attr("d", arc); 
arcs.transition() 
.duration(duration) 
.attrTween("d", arcTween); 
sliceLabel = sliceLabel.data(donut(dataset), d => d.data.label); 
sliceLabel.exit().remove(); 
sliceLabel.enter() 
.append("text") 
.attr("class", "arcLabel") 
.attr("transform", function(d) { 
    return "translate(" + (arc.centroid(d)) + ")"; 
}) 
.attr("text-anchor", "middle") 
.style("fill-opacity", function(d) { 
    if (d.value === 0) { 
    return 1e-6; 
    } else { 
    return 1; 
    } 
}) 
.text(function(d) { 
    return d.data.label; 
}); 
sliceLabel.transition() 
.duration(duration) 
.attr("transform", function(d) { 
    return "translate(" + (arc.centroid(d)) + ")"; 
}) 
.style("fill-opacity", function(d) { 
    if (d.value === 0) { 
    return 1e-6; 
    } else { 
    return 1; 
    } 
}); 

Ich habe eine Torte, die ich auf der Version Refactoring 4 und ich habe es ohne Fehler laufen, aber es löscht nicht mehr Segmente. Abgesehen von Änderungen, die ich machen musste, um es zum Laufen zu bringen, ist der Kuchen genauso wie der der Version 3.

version 4 pie

Als Referenz ist hier eine Funktion eines in Version drei: version 3

Answer 1

Sie benötigen introduced in version 4 auf die neuen merge Methode zu lesen. Sie verwenden es nicht, aber Sie müssen:

arcs = arcs.data(donut(dataset), d => d.data.label); 

arcs.exit().remove(); 

arcs = arcs.enter() //<-- save back to arcs variable 
    .append("path") 
    .attr("stroke", "white") 
    .attr("stroke-width", 0.8) 
    .attr("fill", function(d, i) { 
    return color(i); 
    }) 
    .attr("d", arc) 
    .merge(arcs); //<-- merge enter with update 

Mit der letzten Zeile arcs jetzt enter + update ist, ohne es zu arcs wurde gerade aktualisiert.

Aktualisiert fiddle.