如何为D3 Sankey图中的文本元素添加可见背景色？

核心问题是你在text元素内部插入了rect——SVG规范不允许text元素包含图形元素，所以这些rect不会被渲染。同时你使用.insert('rect', 'text')的方式错误，当前选中的是text元素，insert操作会将rect作为text的子元素插入，而非预期的兄弟元素。

修正后的代码片段 #

this.nodes
  .selectAll('text')
  .data(this.data.nodes)
  .join(
    (enter) => {
      // 先创建并配置所有text元素，获取文本边界框
      const textEnter = enter
        .append('text')
        .text((d) => `${d.name + ': ' + d.value}`)
        .style('fill', '#000000')
        .attr('text-anchor', 'right')
        .attr('x', (d, i) => d.x0 + (d.x1 - d.x0) / 0.5)
        .attr('y', (d, i) => d.y0 + (d.y1 - d.y0) / 2)
        .attr('dy', '0.35em')
        .attr('transform', (d, i) => {
          const x = d.x0 + (d.x1 - d.x0) / 2;
          const y = d.y0 + (d.y1 - d.y0) / 2;
          return `rotate(0, ${x}, ${y})`;
        })
        .call(getTextBox);

      // 为每个text元素在父节点中插入前置的rect作为背景
      textEnter.each(function(d) {
        d3.select(this.parentNode)
          .insert('rect', this) // 在当前text元素之前插入rect
          .attr('x', d.bbox.x)
          .attr('y', d.bbox.y)
          .attr('width', d.bbox.width)
          .attr('height', d.bbox.height)
          .style('fill', '#FFE6F0');
      });

      return textEnter;
    },
    (update) =>
      update
        .transition()
        .duration(1000)
        .ease(d3_easeQuadInOut)
        .attr('x', (d, i) => d.x0 + (d.x1 - d.x0) / 2)
        .attr('y', (d, i) => d.y0 + (d.y1 - d.y0) / 2)
        .attr('transform', (d, i) => {
          const x = d.x0 + (d.x1 - d.x0) / 2;
          const y = d.y0 + (d.y1 - d.y0) / 2;
          return `rotate(0, ${x}, ${y})`;
        })
  );

function getTextBox(selection) {
  selection.each(function (d) {
    d.bbox = this.getBBox();
  });
}

关键修正点 #

1. 分离text和rect的创建逻辑：先完成text元素的所有配置并获取文本边界框（bbox），再单独处理rect的插入，避免嵌套错误。
2. 正确插入兄弟元素：通过textEnter.each遍历每个text元素，选择其父节点后，用.insert('rect', this)将rect插入到当前text元素的前面——这样rect会作为text的兄弟节点存在，且DOM顺序在text之前，会被SVG作为背景渲染。
3. 遵循SVG规范：确保rect作为独立的图形元素存在于text的父节点下，而非嵌套在text内部。

更新阶段的补充说明（可选） #

如果需要在更新时同步更新rect的位置和大小，需在update分支中重新获取text的边界框并更新对应rect：

(update) => {
  // 更新text元素并重新获取边界框
  const textUpdate = update
    .transition()
    .duration(1000)
    .ease(d3_easeQuadInOut)
    .attr('x', (d, i) => d.x0 + (d.x1 - d.x0) / 2)
    .attr('y', (d, i) => d.y0 + (d.y1 - d.y0) / 2)
    .attr('transform', (d, i) => {
      const x = d.x0 + (d.x1 - d.x0) / 2;
      const y = d.y0 + (d.y1 - d.y0) / 2;
      return `rotate(0, ${x}, ${y})`;
    })
    .call(getTextBox);

  // 同步更新对应的rect
  textUpdate.each(function(d) {
    d3.select(this.previousElementSibling)
      .transition()
      .duration(1000)
      .ease(d3_easeQuadInOut)
      .attr('x', d.bbox.x)
      .attr('y', d.bbox.y)
      .attr('width', d.bbox.width)
      .attr('height', d.bbox.height);
  });

  return textUpdate;
}

内容的提问来源于stack exchange，提问作者1zz0