通过D3删除文本

我试图根据页面上的一些动态数据/用户输入更新图形。由于数据只是放置在条形图列的底部，并且不需要移动，所以我不认为我需要任何动画。只需要删除当前文本并用新值替换即可。通过D3删除文本

下面的代码是我最好的猜测，但它似乎并没有这样做。 .append()工作正常，但它只是覆盖旧的文本，它最终变得不可读（显然）。好像是我使用不当的.remove()。

相对较新的D3.js所以如果有更好的方法/任何人有任何提示/技巧，他们将不胜感激。

每评论

 //Remove the old text 
     this.options.barDemo.selectAll("text.eoyValue") 
      .data(data) 
      .exit().remove(); 

     //Replace with the new text   
     this.options.barDemo.selectAll("text.eoyValue") 
      .data(data) 
      .enter().append("svg:text") 
      .attr("x", function(d, i) { return x(i + .35) + barWidth; }) 
      .attr("y", height - 10) 
      .attr("dx", -barWidth/2) 
      .attr("dy", "15px") 
      .attr("text-anchor", "middle") 
      .attr("style", "font-size: 12; font-family; Helvetica, sans-serif") 
      .text(function(d) { 
       console.log(d.attributes.contract); 
       return d.attributes.contract; 
      }) 
      .attr("transform", "translate(0, 18)") 
      .attr("class", "eoyValue");

来源

2014-10-27 NealR

它看起来像你从未添加类'eoyValue'，所以'barDemo.selectAll（ “text.eoyValue”）'永远是空的。 – 2014-10-27 18:59:51

谢谢，添加到帖子。不幸的是，我遇到了类似的问题，因为'.remove（）'调用仍然没有选择任何东西，现在'.append（）'调用不会写入任何新的值，它们全部停留在页面加载时有'0.00'。 – NealR 2014-10-27 21:40:19

如果我在'.text（）'函数中放置'console.log（）'，那么只会在页面加载时触发'.append（）'调用。 Chrome的调试器显示了值更改时评估的代码块，但是'console.log（）'不会运行。 – NealR 2014-10-27 21:43:22

所以在不增加的类名，我也没有调用transition()方法顶部编辑。下面的代码解决了这个问题。

 this.options.barDemo.selectAll("text.eoyValue") 
      .data(data) 
      .enter().append("svg:text") 
      .attr("x", function(d, i) { return x(i + .35) + barWidth; }) 
      .attr("y", height - 10) 
      .attr("dx", -barWidth/2) 
      .attr("dy", "15px") 
      .attr("text-anchor", "middle") 
      .attr("style", "font-size: 12; font-family; Helvetica, sans-serif") 
      .text(function(d) { return d.attributes.contract; }) 
      .attr("transform", "translate(0, 18)") 
      .attr("class", "eoyValue"); 


     var columnBaseText = this.options.barDemo.selectAll("text.eoyValue").data(data, function (d, i) { 
      console.log(i); 
      return i; 
     }); 

     columnBaseText.transition() 
      .duration(1100) 
      .attr("y", height-10) 
      .text(function (d) { 
       return d.attributes.contract; 
      });

来源

2014-10-27 22:24:11 NealR

通过D3删除文本

回答

相关问题