Question

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

我面临的问题是从饼图中删除数据。取消选中该复选框后，我将从“数据集”中删除数据并更新图表。

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

我尝试添加“.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")）。还有其他方法可以做到这一点，但是这个方法明确了你正在使用的内容。

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

1 个答案: