堆栈区域图上的D3 exit()。remove()

时间:2014-03-10 13:34:52

标签: d3.js

我在创建的堆积区域图表中遇到了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();

我得到的错误是对象[对象数组]没有方法exit我已经尝试将selectAll更改为仅选择,但这也产生相同的错误。提前谢谢。

1 个答案:

答案 0 :(得分: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;
    });