将基于 g 的 id 的文本附加到 gs 的选择中：无法读取未定义的属性 'attr'

Question

我的页面上有几个 g，每个都有不同的 id。我想在每个 g 中附加一个显示此 id 的文本。

这是我的代码：

    d3.selectAll("g")
        .append('text')
        .attr('x', 60)
        .attr('y', 90)
        .text(function(d) {return d.attr("id")})
        .attr("font-family", "sans-serif")
        .attr("font-size", "20px")
        .attr("fill", "blue");

它returns一个错误：

Uncaught TypeError: Cannot read property 'attr' of undefined
    at SVGTextElement.<anonymous>

Answer 1

在 D3 中，著名的第一个参数指的是绑定到元素的 datum（因此，相应的参数通常命名为 d）。

您不需要数据。您想要获取作为文本父级的 <g> 元素。因此，使用：

.text(function() {
    return d3.select(this.parentNode).attr("id")
});

这是一个演示：

d3.selectAll("g")
  .append('text')
  .attr('x', 60)
  .attr('y', (_, i) => 20 + i * 20)
  .text(function() {
    return d3.select(this.parentNode).attr("id")
  });

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <g id="foo"></g>
  <g id="bar"></g>
  <g id="baz"></g>
</svg>

将基于 g 的 id 的文本附加到 gs 的选择中：无法读取未定义的属性 'attr'

Append text based on g's id to a selection of gs: Cannot read property 'attr' of undefined

html

attr

d3.js

将基于 g 的 id 的文本附加到 gs 的选择中：无法读取未定义的 属性 'attr'

Append text based on g's id to a selection of gs: Cannot read property 'attr' of undefined

html

attr

d3.js

将基于 g 的 id 的文本附加到 gs 的选择中：无法读取未定义的属性 'attr'