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

尼基塔·古普塔

下面是每次单击下拉菜单中的按钮或选项时调用的代码,以便使用新数据更新我的 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");

        }
西里尔·切里安

您没有在文本中添加类

这将选择所有带有类文本的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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用可变长度的新数据更新d3条形图标签

来自分类Dev

堆积条形图标签-D3

来自分类Dev

堆积条形图标签-D3

来自分类Dev

d3.js图表未使用新数据更新

来自分类Dev

d3.js 条形图标签条

来自分类Dev

来自数据框列的条形图/饼图标签

来自分类Dev

NVD3水平条形图标签太长

来自分类Dev

d3js堆积的条形图未更新

来自分类Dev

D3 在数据更新时删除先前的条形图

来自分类Dev

D3-在点击时更新条形图数据

来自分类Dev

D3-在点击时更新条形图数据

来自分类Dev

在D3中更新条形图以生成多个图表

来自分类Dev

在d3中更新条形图以生成多个图表

来自分类Dev

d3图表未正确更新

来自分类Dev

类别未更新以向下滚动条形图

来自分类Dev

如何使用新数据更新d3.js条形图

来自分类Dev

条形图更新

来自分类Dev

如何使用onchange滑块事件更新d3图表中的数据?

来自分类Dev

如何使用onchange滑块事件更新d3图表中的数据?

来自分类Dev

Google条形图标签动态数据。如何添加标签?

来自分类Dev

r中的条形图标签:使用text()显示旋转标签的问题

来自分类Dev

D3.js 如何在有新数据时更新图表

来自分类Dev

如何在 Ember 应用程序的 D3 垂直条形图中添加更新标签

来自分类Dev

d3折线图和面积图未使用新数据数组更新

来自分类Dev

D3.js旋转垂直条形图标签

来自分类Dev

堆叠式垂直条形图标签-D3.js

来自分类Dev

单击按钮时动态更新样式,D3条形图

来自分类Dev

更新D3堆叠条形图中的数据

来自分类Dev

如何使用ChartistJs库和ReactJs更改条形图标签的颜色和字体