D3.js 从d3动画饼图中删除分段

我在这里使用了原型代码：

该示例显示了如何在添加新数据时添加段，而不是如何在数据更改[返回]时再次删除段。我是d3的新手，还不太了解exit（）函数

如果反转初始和第二个数据集，您将看到grapes段从未被删除。提前谢谢

任何帮助都会很好

更新代码：（当数据更改时，我的最终图表需要在计时器上更新）

---

要删除没有数据的元素，必须使用，这

返回退出选择：选择中未找到新数据的现有DOM元素

因此，在

updateChart

函数中，您需要为路径和文本选择退出：

var newArcs = arcs.data(donut(dataset));

newArcs.exit().remove();

var newSlices = sliceLabel.data(donut(dataset));

newSlices.exit().remove();

以下是您的更新代码：

//设置所有常量
var持续时间=500；
可变宽度=500
可变高度=300
变量半径=数学地板（数学最小值（宽度/2，高度/2）*0.9）；
变量颜色=[“d62728”、“ff9900”、“004963”、“3497D3”]；
//测试数据
变量d2=[{
标签：“苹果”，
价值：20
}, {
标签：“橙子”，
价值：50
}, {
标签：“梨”，
数值：100
}];
变量d1=[{
标签：“苹果”，
数值：100
}, {
标签：“橙子”，
价值：20
}, {
标签：“梨”，
价值：20
}, {
标签：“葡萄”，
价值：20
}];
//设置初始数据
var数据=d1
var updateChart=函数（数据集）{
var newArcs=arcs.data（圆环（数据集））；
newArcs.exit（）.remove（）；
newArcs.enter（）
.append（“路径”）
.attr（“笔划”、“白色”）
.attr（“笔划宽度”，0.8）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）；
newArcs.transition（）
.持续时间（持续时间）
.attrTween（“d”，arcTween）；
var newSlices=sliceLabel.data（甜甜圈（数据集））；
newSlices.exit（）.remove（）；
newSlices.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{
返回“平移（“+（弧形心（d））+”）；
})
.样式（“填充不透明度”，函数（d）{
如果（d.value==0）{
返回1e-6；
}否则{
返回1；
}
});
sliceLabel.data（甜甜圈（数据集））.enter（）
.append（“文本”）
.attr（“类”、“arcLabel”）
.attr（“转换”，函数（d）{
返回“平移（“+（弧形心（d））+”）；
})
.attr（“文本锚定”、“中间”）
.样式（“填充不透明度”，函数（d）{
如果（d.value==0）{
返回1e-6；
}否则{
返回1；
}
})
.文本（功能（d）{
返回d.data.label；
});
};
var color=d3.scale.category20（）；
var donut=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d值；
});
var arc=d3.svg.arc（）
.内半径（半径*.4）
.外层（半径）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var arc_grp=svg.append（“g”）
.attr（“类”、“arcGrp”）
.attr（“变换”、“平移”（+（宽度/2）+）、“+（高度/2）+”）；
var label_group=svg.append（“g”）
.attr（“类”、“lblGroup”）
.attr（“变换”、“平移”（+（宽度/2）+）、“+（高度/2）+”）；
var arcs=arc\u grp.selectAll（“路径”）
.数据（甜甜圈（数据））；
arcs.enter（）
.append（“路径”）
.attr（“笔划”、“白色”）
.attr（“笔划宽度”，0.8）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
})
.attr（“d”，弧）
.每个功能（d）{
返回此值。当前值=d；
});
var sliceLabel=标签组。选择全部（“文本”）
.数据（甜甜圈（数据））；
sliceLabel.enter（）
.append（“文本”）
.attr（“类”、“arcLabel”）
.attr（“转换”，函数（d）{
返回“平移（“+（弧形心（d））+”）；
})
.attr（“文本锚定”、“中间”）
.样式（“填充不透明度”，函数（d）{
如果（d.value==0）{
返回1e-6；
}否则{
返回1；
}
})
.文本（功能（d）{
返回d.data.label；
});
//更新数据
设置间隔（函数（模型）{
返回updateChart（d2）；
}, 2000);
//吐温函数
var arcTween=函数（a）{
var i=d3.插值（此为电流，a）；
该电流=i（0）；
返回函数（t）{
返回弧（i（t））；
};
};
.arcLabel{
字体：10px无衬线；
填充：#fff；
}
您的小提琴没有正确显示图表在进一步排除故障时，在我看来，updateChart（dataset）函数中没有执行enter（）。初始加载后添加新数据时，颜色和标签未添加，只有一个“冷”空白点，新葡萄片应位于：-）以上注释参考新代码抱歉，如果不清楚，似乎没有添加新数据，则删除效果良好。尽管这里有一个不同的问题，但仍在进行此项工作：您希望重构代码以接受更多和更少的数据点。既然如此，请再发一个问题。
var newArcs = arcs.data(donut(dataset));

newArcs.exit().remove();

var newSlices = sliceLabel.data(donut(dataset));

newSlices.exit().remove();