重构D3 V3馅饼版本4意外行为

Question

示例代码更新：

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

我有一个馅饼，我重构为4版本，我得到它没有错误运行，但它不再删除片段。除了为了让它运行而必须做出的改变之外，它与第3版完全一样。

version 4 pie

仅供参考，这里有三种版本的工作之一： version 3

Answer 1

您需要在新merge方法introduced in version 4阅读起来。你不使用它，但你需要：

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 

随着最后一行arcs现在enter + update是没有它arcs刚刚更新。

更新fiddle。