2

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

然后它会自我更新：
更新 X 和 Y 轴
更新实际的条形图
更新图例

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

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

下面的代码在用户单击“全部删除”按钮后立即执行。我的意图是只删除一根柱（名为“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/

4

1 回答 1

2

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

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; });
于 2013-01-29T01:14:29.443 回答