リファクタリングD3 v3のパイ

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

は参考のため、ここではバージョン3での作業です：あなたは新しいmerge方法introduced in version 4上に読む必要が version 3

Answer 1

。あなたはそれを使用していないが、あなたがする必要があります。その最後の行arcsで

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 

は今enter + updateあるそれなしarcsは、単に更新しました。

fiddleが更新されました。