Javascript 删除并用d3更新堆叠面积图

我有一个使用D3的叠层面积图，可以很好地渲染和显示。图表上还有一个图例

问题是，当用户单击/点击其中一个图例条目时，我需要更新图表。我所说的更新是指删除选中的条目，并用剩余的值重新绘制图表

我的交互工作正常（选择图例项目会触发重画），但我无法让它删除图表上不再存在的条目。如果我在下面的代码中添加

path.exit（）.remove（）

，无论选择了哪个条目，它都会删除最上面的路径

如果我使用第二段代码进行更新，它会正确地重新绘制，甚至会从图表中删除正确的条目，以保存最上面的部分。它永远不会移除那个

我也尝试过将两者结合起来，但没有效果。任何帮助或指导都将不胜感激

svg.selectAll(".layer")
            .data(layers);

path.enter().append("path")
            .attr("class", "layer")
            .attr("d", function(d) { return area(d.values); })
            .style("fill", function(d, i) { return d.color });

更新图表：

svg.selectAll(".layer")
            .data(layers)
            .attr("d", function(d) { return area(d.values); })
            .style("fill", function(d, i) { return d.color || color(d.label); })
            .transition() // start a transition to bring the new value into view
            .ease("linear")
            .duration(500)

---

默认情况下，D3根据元素的数组索引匹配元素。也就是说，如果传入的数组短一个元素，则最后一个元素将位于

.exit（）

选择中。您可以提供一个函数，告诉D3在

.data（）

@larskothoff的第二个参数中匹配什么，它可以部分地将我带到那里。请允许我尝试重新措辞。以下面的提琴为例，我可以很容易地移除红色或绿色的路径，但如果我这样做，那里会有一个间隙。我需要能够重新绘制图表，这样差距就会消失。好像一开始就没有。提琴手：我能够在@Larskothoff的基础上进行构建，并使其正常工作。谢谢