Question

我有一个使用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删除并更新堆积面积图

0 个答案: