D3文字位于g元素内

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绘制文本的方式。

它与使用div以及使用“传统” HTML的所有元素有所不同：您可以将其视为实际的图形框架。

---

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

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

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

这将允许您的text垂直绘制在您的g内。

---

请注意，文本基线的水平轴等效项由text-anchor属性确定。如果您想在其g中将文本居中，则只需：

1. 锚定将text元素放入其middle：text-anchor: middle
2. 将锚点放在g中：x="50"

---

下面是一个代码段，演示了如何使用我在示例中提到的属性。

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>