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

Posted 2023-02-22

【中文标题】堆栈区域图上的 D3 exit().remove()

【英文标题】：D3 exit().remove() on stack area chart

【发布时间】：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，感谢您的帮助 - 您的建议帮助我解决了我遇到的主要问题之一。

【参考方案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;
    );