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");

要选择性地编辑满足某些条件的文字，如comments之一所述，您可以使用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”开头的所有文本，并仅更改这些文本的文本内容。

Answer 2

它没有改变，因为你的selectAll没有得到任何回报。您需要选择svg，然后抓取其中的所有text元素。

请改为尝试：

var text = d3.select("svg")
    .selectAll('text')
    .each(function(d, i){
        console.log(d)
        d.text("new text")
    })

console.log(d)应该返回text

内的每个svg标记

修改

这不是最优雅的方式，但这应该是你要改变你的文字

var text = d3.select('svg').selectAll('text')[0] for (var i=0; i<text.length; i++){ console.log(text[i].innerHTML = "new") }

Working JSFiddle

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

2 个答案: