0

我有一个使用 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)
4

0 回答 0