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 回答