如何更改d3中的文本元素？

Question

为什么d不是一个对象？以及如何访问这些文本对象？(以下代码错误)

d3.selectAll("svg text").each(function(d, i) {

        d.text("New");
});

Answer 1

在提供给.each()参数的回调内部d将引用绑定到元素的数据.您应该使用this而不是指向迭代的当前元素.要将其包装到D3选择中,您需要执行此操作d3.select(this).这会将您的代码段更改为

d3.selectAll("svg text").each(function(d, i) {
  d3.select(this).text("New");
});

也就是说,有一个更简洁和优雅的方式来实现同样的事情,D3将为你做迭代,而无需显式调用.each():

d3.selectAll("svg text").text("New");

要选择性地编辑满足某些条件的文本,如您的一条评论中所述,您可以使用selection.filter():

d3.selectAll("svg text")
  .filter(function() {
    return /^C/.test(d3.select(this).text());  // Check if text begin with a "C"
  })
  .text("New");

这将预先选择以"C"开头的所有文本,并仅更改这些文本的文本内容.