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

Question

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

这是小提琴http://jsfiddle.net/L5Q8r/

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

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

我尝试添加“.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。

Answer 1

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

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

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

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

这让我想到了第二件事。您没有在任何地方保存更新的选择，这会导致以后出现问题。对选择调用.data() 会修改基础数据，但不会更新选择。也就是说，arcs 在调用.data() 之前和之后都指代相同的元素，而不管您对.enter() 等做什么。

我已经解决了这两个问题here。对于后者，我明确地重新选择了数据应该绑定到的元素（例如arc_grp.selectAll("path")）。还有其他方法可以做到这一点，但这种方法可以明确您正在使用的内容。