d3.js Insert() 函数添加子元素 - 而不是兄弟元素

看起来当我使用“插入”功能时，新元素总是作为子元素插入 - 而不是作为sibling.

我仍然不明白为什么会这样，因为插入函数实际上应该在指定元素之前插入一个新元素 - 而不是in将指定元素作为子元素。

基本上我试图在“文本”元素旁边创建一个“矩形”元素

目标是在 d3 桑基图中的文本后面添加背景颜色。

 // NODE TEXT
this.nodes
  .selectAll('text')
  .data(this.data.nodes)
  .join(
    (enter) =>
      enter
        .append('text')
        .text((d) => `${d.name + ': ' + d.value}`)
        .style('fill', '#000000')
        .attr('text-anchor', 'right')
        .attr('x', (d, i) => {
          return d.x0 + (d.x1 - d.x0) / 0.5;
        })
        .attr('y', (d, i) => {
          return 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)
        .insert('rect', 'text')
        .attr('width', function (d) {
          return d.bbox.width;
        })
        .attr('height', function (d) {
          return d.bbox.height;
        })
        .attr('x', function (d) {
          return d.bbox.x;
        })
        .attr('y', function (d) {
          return d.bbox.y;
        })
        .style('fill', 'grey'),
    (update) =>
      update
        .transition()
        .duration(1000)
        .ease(d3_easeQuadInOut)
        .attr('x', (d, i) => {
          return d.x0 + (d.x1 - d.x0) / 2;
        })
        .attr('y', (d, i) => {
          return 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();
  });
}

这是我的浏览器渲染的 HTML 元素的图片。

请注意，“rect”元素是文本的子元素，而不是所需的同级元素。

您所拥有的代码中的结果是预期的：它发生是因为insert调用作为父级的文本选择。

第一个简单的解决方案是打破链条，这样你就有了selection.append and a selection.insert。例如：

const svg = d3.select("svg"),
  data = d3.range(5).map(e => ({
    value: e
  }));

svg.selectAll(null)
  .data(data)
  .join(enter => {
    enter.append("text")
      .attr("x", 20)
      .attr("y", d => 20 + 30 * d.value)
      .text(d => `text #${d.value}`)
      .call(getTextBox);

    enter.insert("rect", "text")
      .attr('width', d => d.bbox.width)
      .attr('height', d => d.bbox.height)
      .attr('x', d => d.bbox.x)
      .attr('y', d => d.bbox.y)
      .style('fill', 'grey')

  })

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

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg></svg>

然而，这个 SVG 将具有以下结构：

<rect></rect>
<rect></rect>
<rect></rect>
...
<text></text>
<text></text>
<text></text>
...

也就是说，如果您想要以下结构......

<rect></rect>
<text></text>
<rect></rect>
<text></text>
<rect></rect>
<text></text>
...

...你需要更详细一点insert。在此示例中，我通过 ID 获取相应的文本元素：

const svg = d3.select("svg"),
  data = d3.range(5).map(e => ({
    value: e
  }));

svg.selectAll(null)
  .data(data)
  .join(enter => {
    enter.append("text")
      .attr("id", d => `text${d.value}`)
      .attr("x", 20)
      .attr("y", d => 20 + 30 * d.value)
      .text(d => `text #${d.value}`)
      .call(getTextBox);

    enter.insert("rect", d => d3.select(`#text${d.value}`).node())
      .attr('width', d => d.bbox.width)
      .attr('height', d => d.bbox.height)
      .attr('x', d => d.bbox.x)
      .attr('y', d => d.bbox.y)
      .style('fill', 'grey')

  })

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

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg></svg>