Question

我的页面上有几个g，每个都有不同的ID。我想在每个文本中附加一个显示此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");

它返回错误：

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'

1 个答案: