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

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

1 个答案: