如何在 D3.js SVG 网格矩形上居中文本？

Question

如何在 D3.js SVG 网格 rect 上水平和垂直居中文本？

这是我试图开始工作的示例：

https://jsfiddle.net/djangofan/koc74p9x/4/

var columnText = row.selectAll(".column")  // select .column val from data
    .data(function(d) { return d; })
    .enter().append("text")
    .text(function(d) { return d.chord; })
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .style("fill", "red");

这就是它的样子。我希望“Gm”文本在第一个单元格中居中。如果我尝试向下调整，文本会在通过单元格的顶部边框时消失。

Answer 1

x将和位置移动y一半宽度/高度：

.attr("x", function(d) {
    return d.x + d.width / 2;
})
.attr("y", function(d) {
    return d.y + d.height / 2;
})

并将text-anchor和设置dominant-baseline为middle：

.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")

最后，将文本移动到矩形的顶部（即稍后附加它们）。

这是经过这些更改的代码：

.attr("x", function(d) {
    return d.x + d.width / 2;
})
.attr("y", function(d) {
    return d.y + d.height / 2;
})

.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")