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

Question

为什么d不是对象？我怎样才能访问那些文本对象？（以下代码是错误的）

为什么d不是对象？我怎样才能访问那些文本对象？（以下代码是错误的）

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

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

- Iman

---

我认为你的 selectAll 格式不正确。你想要抓取什么？所有在 svg 标签内的 text 标签吗？你能否在 jsfiddle 上提供你的代码？ - BDD

我想选择所有以特定字符（“C”）开头的文本标签，然后将它们更改为其他内容，因此我使用each函数来获取它们，但我无法更改它们的值！ - Iman

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”开头的所有文本，并仅更改这些文本的文本内容。

- altocumulus

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)应该会返回在你的svg中的每个text标签。

编辑：

这不是最优雅的方法，但这应该可以让你更改你的文本。

var text = d3.select('svg').selectAll('text')[0]

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

Working JSFiddle

- BDD

---

我在你的代码中遇到了这个错误：“TypeError: d.text不是一个函数”。 - Iman

console.log(d) 返回什么？此外，如果你在所有事情之后 console.log(text)，那么它也会返回什么？ - BDD

一堆字符串（这些文本元素中的字符串） - Iman

这是我的简化SVG代码：<svg><g transform="translate(0,98.57142857142861)" style="opacity: 1;" class="tick"><line y2="0" x2="-6"></line><text class="" y="0" x="-9" style="text-anchor: end;" dy=".32em">C4-h</text></g></svg> - Iman

让我仔细看看。 - BDD

@Iman 我已经更新了我的答案。希望这能对你有所帮助。 - BDD