g元素内的D3文本定位

Question

我是 D3 的新手，我正在尝试使用 D3 v5 在矩形内添加文本。我已经为此编写了以下代码。

rootSVG = d3.select('.rootSVG')
    .selectAll('rect')
    .data(data)
    .enter()
    .append('g')
    .attr('transform', (d, i, elements) => {
        return 'translate(0, ' + i * 21 + ')';
    });

rootSVG.append('rect')
    .attr('height', 20)
    .attr('width', 100)
    .style('fill', 'green')
    .on('mouseover', (d, i, elements) => {
        d3.select(elements[i])
           .transition()
           .duration(500)
           .style('fill', 'red');
    })
    .on('mouseout', (d, i, elements) => {
        d3.select(elements[i])
            .transition()
            .duration(500)
            .style('fill', 'green');
    });

rootSVG.append('text')
    .attr('x', 10)
    .text((d, i, elements) => {
         return d.name;
    });

我在浏览器中得到以下结果。 正如您在上图中看到的，矩形元素放置得很好，但文本元素已关闭。为什么即使他们属于同一组也会发生这种行为？如何确保文本始终保持在矩形内？

JSFiddle https://jsfiddle.net/ysm0hfzn/4/

Answer 1

这是由于 SVG 绘制文本的方式。

这与在“传统”HTML 中使用 div 和所有内容有些不同：您可以将其视为一个实际的 图形 框架。

---

这里的问题是text 元素的基线默认是它的底边。这意味着，当在(0, 0) 处绘制文本时，text 元素的 左下角 角将位于(0, 0)

您可以通过在代码中添加以下 CSS 来更改 text 元素的主要基线：

g > text {
    dominant-baseline: text-before-edge;
}

这将允许您的texts 垂直绘制在您的gs。

---

附带说明，文本基线的水平轴等效值由text-anchor 属性确定。如果您想在他们的g 中居中您的文本，您可以简单地：

1. 锚定 text 元素到它们的middle: text-anchor: middle
2. 在g: x="50" 中居中锚点

---

这是一个代码 sn-p 演示如何使用我在您的示例中提到的属性。

g > text {
  dominant-baseline: text-before-edge;
  text-anchor: middle;
}

<svg>
  <g>
    <rect width="100" height="20" fill="LimeGreen"></rect>
    <text x="50">Letter</text>
  </g>
  <g transform="translate(0, 22)">
    <rect width="100" height="20" fill="LimeGreen"></rect>
    <text x="50">Number</text>
  </g>
</svg>