javascript - d3 条形图标签在使用新数据更新图表时未更新

Question

以下是每次单击下拉菜单中的按钮或选项时都会调用的代码，以便使用新数据更新我的 d3 条形图。

图表中的条形图已根据新数据正确更新，但条形图的标签并未被新标签替换，而是同时显示新旧标签。

请提出一些建议，以便旧标签不会显示在条形图上。

function updateGraph(data) {

          // scale the range of the data
          x.domain(data.map(function(d) { return d.Country; }));
          y.domain([0, d3.max(data, function(d) { return d.Value; })]);

          var bars = svg.selectAll(".bar").data(data);

          bars.enter().append("rect").attr("class", "bar");

          bars.transition().duration(200).attr("x", function(d) { return x(d.Country); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) {return y(d.Value); })
          .attr("height", function(d) { return height - y(d.Value); });

          var texts = svg.selectAll(".text").data(data);

          texts.enter().append("text").attr("class","label").attr("x", (function(d) { return x(d.Country) + x.rangeBand() / 2 ; }  ))
                .attr("y", function(d) { return y(d.Value) + 1; })
                .attr("dy", ".75em")
                .text(function(d) { return d.Value; });  


          texts.transition().duration(200).attr("x", (function(d) { return x(d.Country) + x.rangeBand() / 2 ; }  ))
                .attr("y", function(d) { return y(d.Value) + 1; })
                .attr("dy", ".75em")
                .text(function(d) { return d.Value; });  

          bars.exit().remove();

          svg.selectAll(".axis").remove();

          svg.append("g")
             .attr("class", "x axis")
             .attr("transform", "translate(0," + height + ")")
             .call(xAxis);

          svg.append("g")
              .attr("class", "y axis")
              .call(yAxis)
              .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Value");

        }

Answer 1

你没有给文本添加类

这将选择所有具有 text 类的 DOM

var texts = svg.selectAll(".text").data(data);



texts
.enter()
.append("text")
.attr("class","label text") <-- add text class here
.attr("x", (function(d) { return x(d.Country) + x.rangeBand() / 2 ; }  ))
                .attr("y", function(d) { return y(d.Value) + 1; })
                .attr("dy", ".75em")
                .text(function(d) { return d.Value; }); 

现在删除更新时的所有文本

bars.exit().remove();
texts.exit().remove(); <--- add this to remove exited text