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

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

这是小提琴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()会修改基础数据，但不会更新选择。 也就是说，无论你使用.enter()等做什么， arcs都会在调用.data()之前和之后引用相同的元素。

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