Javascript 带d3、js的圆环图中的arctween和数据集更改

点击一个按钮，我想将一个新的数据集添加到我的甜甜圈图表中，并让它转换到新的数据集。我写的代码有点像这样，但是当数据集中的单个数据的数量与前面的不同时，即从[1,2]到[1,2,3,4]，就会遇到问题

我认为问题在于，每当新数据集有更多数据时，我需要创建一个新路径，而每当数据集有更少数据时，我需要删除路径。但是，当我尝试在单击函数中追加数据时，它将追加数据而不删除旧路径，并在图表上重叠

这是一个没有附加的版本，其中arctween可以工作，但是会有空的饼图弧，因为我不附加路径（arctween工作一半时间）：

var pieW=500；
var pieH=500；
var innerRadius=100；
var outerRadius=200；
var results_pie=d3.layout.pie（）
.sort（空）；
var pie_arc=d3.svg.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
var svg_pie=d3。选择（#pieTotal）
.attr（“宽度”，pieW）
.attr（“高度”，pieH）
.附加（“g”）
.attr（“转换”、“翻译”（“+pieW/2+”，“+pieH/2+”））
.attr（“类别”、“图表”）；
var pie\u path=svg\u pie.selectAll（“path”）.data（结果pie（[1,2]））
.enter（）.append（“路径”）
.attr（“d”，扇形弧）
.每个功能（d）{
这是。_电流=d；
})//存储初始值
.attr（“类别”、“投票权”）
.attr（“值”，函数（d，i）{
回报（i-1）；
});
var pie_投票=[1,2]；
变量pie_colors=[“#0f0”，“#f00”]；
$（svg_pie）.bind（“监视器”，工作者）；
$（svg_pie）.trigger（“监视器”）；
功能工作者（事件）{
饼图路径=饼图路径数据（结果饼图（饼图投票））
.attr（“填充”，函数（d，i）{
返回馅饼颜色[i]；
});
pie_path.transition（）.duration（500）.attrTween（“d”，arcTween）.each（'end'，function（d）{
如果（d.value您需要处理进入和退出选择以及更新选择。例如，请参阅。您案例中的相关代码为

pie_path = pie_path.data(results_pie(pie_votes));

pie_path.enter().append("path")
    .attr("d", pie_arc)
    .each(function (d) {
        this._current = d;
    }) // store the initial values
    .attr("class", "vote_arc")
        .attr("value", function (d, i) {
        return (i - 1);
    });

pie_path.exit().remove();

完整示例。
谢谢。有没有方法在remove（）之后执行回调？是否类似于remove（回调）？您想在回调中执行什么操作？
.remove（）
应该是最后一件事。基本上，我将饼图数据更改放在一个函数中，然后传入数据和颜色。我想让它以一种动画的方式，如果你要输入一组全新的数据（数据数组中的不同长度），它将通过首先将所有内容设置为0来处理它（因此就像arctween正在“清空”），删除数据，初始化新的数据集，然后设置新数据的动画。因此，这基本上需要调用上述代码的更改版本4次，以操纵饼图的移动。您可以设置
.delay（）
对于每个转换，它应该允许您做您想做的事情。您可以简单地延迟enter转换的开始，直到exit转换完成。延迟（）是否相对于帧速率发生？似乎只是在特定的时间之后，因此较慢的系统可能会表现出奇怪的行为？
var pieW = 500;
var pieH = 500;
var innerRadius = 100;
var outerRadius = 200;

var results_pie = d3.layout.pie()
    .sort(null);
var pie_arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var svg_pie = d3.select("#pieTotal")
    .attr("width", pieW)
    .attr("height", pieH)
    .append("g")
    .attr("transform", "translate(" + pieW / 2 + "," + pieH / 2 + ")")
    .attr("class", "piechart");

var pie_path = svg_pie.selectAll("path").data(results_pie([1, 2]))
    .enter().append("path")
    .attr("d", pie_arc)
    .each(function (d) {
    this._current = d;
}) // store the initial values
.attr("class", "vote_arc")
    .attr("value", function (d, i) {
    return (i - 1);
});

function arcTween(a) {
    var i = d3.interpolate(this._current, a);
    this._current = i(0);
    return function (t) {
        return pie_arc(i(t));
    };
}

$('button').click(function () {
    pie_votes = [];
    pie_colors = [];
    for (var i = 0; i < Math.floor(Math.random() * 10); i++) {
        //sets new values on pie arcs
        pie_votes.push(Math.floor(Math.random() * 10));
        pie_colors.push("#" + (Math.floor(Math.random() * 16777215)).toString(16));
    }
    pie_path = pie_path.data(results_pie(pie_votes))
        .enter().append("path")
        .attr("d", pie_arc)
        .each(function (d) {
        this._current = d; }) // store the initial values
    .attr("class", "vote_arc")
        .attr("value", function (d, i) {
        return (i - 1);
    });
    pie_path.attr("fill", function (d, i) {
        return pie_colors[i]
    });

    pie_path.transition().duration(500).attrTween("d", arcTween).each('end', function (d) {
        if (d.value <= 0) {
            this.remove();
        }
    });
});

pie_path = pie_path.data(results_pie(pie_votes));

pie_path.enter().append("path")
    .attr("d", pie_arc)
    .each(function (d) {
        this._current = d;
    }) // store the initial values
    .attr("class", "vote_arc")
        .attr("value", function (d, i) {
        return (i - 1);
    });

pie_path.exit().remove();