svg - 如何使用d3中的选择从元素中获取值

Question

我将 D3 与 SVG 一起使用，并且有一个关于选择的问题。

我在 DOM 中有一个元素，如下所示:

<g class="tooltip">
    // some other code
    <text class="name">Testing D3</text>
</g>

现在我想使用选择来获取文本“Testing D3”。我该怎么做？

我尝试了以下方法:

d3.select(".tooltip .name").text
d3.select(".tooltip .name").value
d3.select(".tooltip .name").textContent
d3.select(".tooltip .name").html

但它们都不起作用。

我也尝试过使用

d3.select(".tooltip .name").html(this.value);

如建议 here和 here ，但这给了我一个 SVGTextElement 而不是实际值。

我也不能使用 document.getElementById("name");，建议 here ，因为我只能通过d3来实现这个功能。

请注意，name 是单个元素。

Answer 1

这里需要一个子选择器(并调用 .text() 函数):

d3.select("g.tooltip > text.name").text();