在d3中添加和删除元素时出现问题 [英] Trouble adding and removing elements in d3

问题描述

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

My goal is to remove a data point from my bar chart.

随后会自动更新：

更新X轴和Y轴

更新实际条形图

更新图例

It will then update itself:
Update X and Y axis
Update the actual bar chart
Update the legend

我遇到的问题：

当我退出）.remove（）我的图形中的矩形，代码也会去掉图例中的矩形。当我尝试输入（）在我的传说中的矩形，他们不出现。我不知道这里发生了什么，但我没有成功添加和删除元素由于数据更改。任何帮助将不胜感激。

Issues I am having:
When I exit().remove() the rectangles in my graph, the code also gets rid of the rectangles in the legend. When I try to enter() the rectangles in my legend, they do not appear. I am not sure what is happening here, but I am not being successful in adding and removing elements due to data changes. Any help would be appreciated.

我认为我遇到问题的代码段：

这是删除矩形的部分

Code snippet of where I think I am having issues:
This is the part that also deletes the rectangles in the legend (I am not sure if I should do this here or in the enter/update/delete part of the legend)

下面的代码是在用户之后执行的（我不知道是否应该在这里或在输入/更新/删除部分中执行此操作）点击全部删除按钮。我的意图是只删除一个条（名为ALL的条）并更新图表。

The code below is executed right after the user clicks the "delete all" button. My intent here is to only delete one bar (the one named "ALL") and update the chart.

            //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(); 

以下是整个代码：

< a href =http://plnkr.co/edit/Nue5bocQsI4E6D5wfNSP =nofollow> http://plnkr.co/edit/Nue5bocQsI4E6D5wfNSP

这里是稍小的代码：

我尽量减少代码，但它仍然相当大。

http://jsfiddle.net/aNQWV/

推荐答案

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

In the part where you update the data you say:

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

问题是，此时svg包含两种rect。一种对应于酒吧，其他的是图例的一部分。这意味着你正在加入这些新的数据到这种混合的矩形，而实际上你想要加入新的数据与酒吧。

The problem is that at this point the svg contains two kind of rects. One kind corresponds to the bars, and the other ones are part of the legend. This means that you are joining the new data to this mix of rects, while actually you wanted to join the new data with the bars only.

所以，你需要一个特定的选择器，仅定位条形。典型的方法是在创建它们时为这些rect添加一个类：

So, you need a more specific selector that targets only the bar rects. The typical approach is to add a class to those rects when you create them:

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

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

Then in the part where you update the data you would say:

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

这篇关于在d3中添加和删除元素时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！