堆栈区域图上的 D3 exit().remove()答案

【问题标题】：D3 exit().remove() on stack area chart堆栈区域图上的 D3 exit().remove()
【发布时间】：2014-04-13 15:27:03
【问题描述】：

我在创建堆积面积图中的exit().remove() 函数时遇到了一些问题。

JSFiddle 此处：Link

我有一个功能，用户可以通过单击图例矩形/颜色来enable/disable 图表中的数据。我知道数据正在根据控制台消息和 Y 轴变化比例进行更新，但图表中的数据没有变化。例如，如果用户取消选择Failed 类别，橙色层应该消失，而失败和通过层应该重新调整。

问题似乎在小提琴的第 214 到 234 行，特别是我打电话给 exit().remove() 的地方：

// filter the data
var updatedData = dataSeries.filter(function(d) {
    if(d.vis === "1"){
        return d;
    }
    else {
        return null;
    }
});

stack.values(function(d) { return d.values; });

layer = stack(updatedData);

main_layer.selectAll(".layer")
    .data(layer);

main_layer
    .attr("d", function(d) { return main_area(d.values); });

main_layer.exit().remove();

我得到的错误是 Object [object Array] has no method exit 我尝试将 selectAll 更改为只是一个选择，但这也会产生相同的错误。提前致谢。

【问题讨论】：

你能在.exit()调用之前添加一个断点，看看main_layer是什么吗？从错误消息中可以看出，它已被重新分配给 D3 选择以外的其他内容。
你需要对选择进行操作，而不是main_layer -- var sel = main_layer.selectAll(".layer").data(layer); sel.exit().remove();。
在小提琴中添加了调试语句。拉斯，我也更新了你的解决方案，但得到了一些奇怪的结果。我会尝试调试发生了什么。
我做了一些额外的更新。这很奇怪；过滤后的数据仍然按预期通过，但是当它到达调用 d.key 的第 234 行时，所有键都是相同的（即：全部“失败”）而不是三个不同的键。
我终于得到了这个工作......将在一分钟内发布答案。 Lars，感谢您的帮助 - 您的建议帮助我解决了我遇到的主要问题之一。

标签： d3.js

【解决方案1】：

我终于得到了这个工作。下面的代码正确更新了图层：

// filter the data
var updatedData = dataSeries.filter(function(d) {
    if(d.vis === "1"){
        return d;
    }
    else {
        return null;
    }
});

stack(updatedData);

var sel = main_layer.select(".layer");

sel
    .attr("class", function(d) { return d.key + " layer"; })
    .style("fill", function(d, i) { 
        if(d.vis === "1") {
            return z(i);   
        }
        else return null;
    })
    .attr("d", function(d) { 
        if(d.vis === "1") {
            return main_area(d.values); 
        }
        else return null;
    });

【讨论】：