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包含两种rects。一种对应于条形，其他类型是图例的一部分。这意味着您要将新数据加入到这些组合中，而实际上您只想使用条形加入新数据。

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

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

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

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

无法在d3中添加和删除元素

1 个答案: