Javascript D3.js：删除动态添加的饼图切片

我能够生成饼图，并根据用户交互动态添加数据

这是小提琴

我面临的问题是从饼图中删除数据的过程。 当复选框未选中时，我将从“数据集”中删除数据并更新图表

图表正在更新，但用户仍然可以看到以前的“饼图”

我尝试添加“.exit（）.remove（）”但没有成功。以下是我所做的：

var updateChart = function (dataset) {
        arcs.data(pie(dataset))
            .enter()
                .append("path")
                .attr("stroke", "white")
                .attr("stroke-width", 0.8)
                .attr("fill", function (d, i) {
                    return color(i);
                })
                .attr("d", arc);

            arcs.data(pie(dataset)).exit().remove(); // Executing but not working

        arcs.transition()
            .duration(duration)
            .attrTween("d", arcTween);          

        sliceLabel.data(pie(dataset));

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

        sliceLabel.data(pie(dataset))
            .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.Population;
                });
        sliceLabel.data(pie(dataset)).exit().remove();//executing but not working       
    };

---

任何帮助都将不胜感激。TIA.

这里有两件事。首先，将数据绑定两次：

arcs.data(pie(dataset))
// ...
arcs.data(pie(dataset)).exit()...

第二次将拾取您刚才添加的圆弧，这不是您想要的。执行一次数据绑定并将结果保存在变量中：

var sel = arcs.data(pie(dataset));
sel.enter()...
sel.exit()...

这让我想到了第二件事。您没有将更新的选择保存到任何位置，导致以后出现问题。对所选内容调用

.data（）

，会修改基础数据，但不会更新所选内容。也就是说，

arcs

在调用

.data（）

之前和之后都引用相同的元素，而不管您如何使用

.enter（）

等

---

我已经解决了这两个问题。对于后者，我显式地重新选择数据应该绑定到的元素（例如，

arc\u grp.selectAll（“path”）

）。还有其他方法可以做到这一点，但这一种方法明确了您的工作内容。

但是现在，如果我选中多个复选框，饼图将显示一个“空切片”。另外，当我取消选中时，数据似乎是从数据集中弹出的，即首先添加的数据在最后被删除。嗯，您缺少了tween函数的部分。固定的。如果要对切片施加特定顺序，则必须对其进行排序并使用键函数。目前，没有足够的信息来进行匹配。这就是魅力。将使用键功能查看切片排序。谢谢