将标题附加到D3树布局会导致错误（D3）

Question

我正在尝试向D3树布局中的某些SVG标签添加工具提示。这是通过过渡呈现标签的函数：

buildLabels() {
  const labelSelection = d3.select('svg g.labels')
    .selectAll('text.label')
    .data(this.nodes);
  labelSelection.exit()
    .remove();

  labelSelection.enter()
    .append('text')
    .style('fill', 'none')
    .style('stroke', 'none')
    .style('stroke-width', '0')
    .attr('transform', (d: any) => // ...)
    .style('fill-opacity', 0)
    .transition()
    .duration(450)
    .ease(d3.easeCircleIn)
    .attr('transform', (d: any) => {
      // ...
    })
    .attr('class', 'label')
    .style('stroke', '#393D3E')
    .style('fill', '#393D3E')
    .style('fill-opacity', 1)
    .style('stroke-width', '.4')
    .style('text-anchor', (d: any) => d.parent ? 'start' : 'end')
    .text(d => d.name);
}

我尝试添加

.append('title')
.text(d => d.name)

[.text之后，但是出现了一个较长的控制台错误

core.js:4061 ERROR TypeError: labelSelection.enter(...).append(...).style(...).style(...).style(...).attr(...).style(...).transition(...).duration(...).ease(...).attr(...).attr(...).style(...).style(...).style(...).style(...).style(...).text(...).append is not a function

如果我将功能更改为：

labelSelection.enter()
  .append('text')
  .text(d => d.name)
  .append('title')
  .text(d => d.name);

我得到了我期望的DOM，这是>

<text>
  Node name
  <title>Node name</title>
</text>
但是，所有节点看起来都不正确，也没有应有的位置。当然，过渡也将全部删除。

我的问题是，还有另外一种方法可以添加不笨重的标题，或者如何解决上面的错误。谢谢！

我正在尝试向D3树布局中的某些SVG标签添加工具提示。这是通过过渡呈现标签的函数：buildLabels（）{const labelSelection = d3.select（'svg g ....

Answer 1

您正在尝试附加到过渡中：