在 d3 中添加和删除元素时遇到问题

Question

我的目标是从条形图中删除数据点。

然后它将自行更新：
更新 X 轴和 Y 轴
更新实际条形图
更新图例

我遇到的问题：
当我退出图形中的矩形（）.remove（）时，代码也会删除图例中的矩形。当我尝试输入（）图例中的矩形时，它们没有出现。我不确定这里发生了什么，但由于数据更改，我没有成功添加和删除元素。任何帮助将不胜感激。

我认为我遇到问题的代码片段：
这也是删除图例中矩形的部分（我不确定我是否应该在这里或在图例的输入/更新/删除部分中执行此操作）

下面的代码在用户单击"全部删除"按钮后立即执行。我在这里的目的是只删除一个柱线（名为"ALL"的柱线）并更新图表。

            //Select rectangles
            var bars = svg.selectAll("rect")
                          .data(dataset, function(d) { return d.State; });

            //Enter rectangles
            bars.enter()
                .append("rect")
                .style("fill", function(d,i) { return color(i) })
                .attr("x", function(d) { return xScale(d.State); })
                .attr("y", function(d) { return yScale(d.CustomerCount) })
                .attr("width", xScale.rangeBand()) //returns rangeRoundBands width
                .attr("height", function(d) { return h - yScale(d.CustomerCount) });                                  

            //Update rectangles
            bars.transition()
                .duration(1000)
                .style("fill", function(d,i) { return color(i) })
                .attr("x", function(d) { return xScale(d.State); })
                .attr("y", function(d) { return yScale(d.CustomerCount) })
                .attr("width", xScale.rangeBand()) //returns rangeRoundBands width
                .attr("height", function(d) { return h - yScale(d.CustomerCount) });

            //Exit rectangles       
            bars.exit()
                .transition()
                .duration(500)
                .attr("x", w)
                .remove(); 

这是整个代码：
http://plnkr.co/edit/Nue5bocQsI4E6D5wfNSP

下面是稍小的代码：
我试图尽可能减少代码，但它仍然很大。
http://jsfiddle.net/aNQWV/

Answer 1

在更新数据的部分，您说：

var bars = svg.selectAll("rect")
    .data(dataset, function(d) { return d.State; });

问题是此时 svg 包含两种矩形。一种对应于条形，另一种是图例的一部分。这意味着您正在将新数据连接到此矩形组合中，而实际上您只想将新数据与柱线连接。

因此，您需要一个更具体的选择器，仅针对柱线矩形。典型的方法是在创建这些矩形时向它们添加一个类：

svg.selectAll(".bar")
    .data(input)
  .enter().append("rect")
    .attr("class", "bar");

然后在更新数据的部分，您会说：

var bars = svg.selectAll(".bar")
    .data(dataset, function(d) { return d.State; });