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

如何在D3.js SVG网格矩形上水平和垂直居中放置文本

以下是我正在努力工作的示例：

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

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

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

并将文本定位和主基线设置为中间：

最后，将文本移动到矩形的顶部，也就是说，稍后追加它们

以下是您的代码和这些更改：

函数gridConfig{ var数据=新数组； var xpos=1；//在1处启动xpos和ypos，以便在我们制作下面的网格时显示笔划 var-ypos=80； var宽度=80； var高度=80； var-click=0； 对于var行=0；行<8；行++{ data.pushnew数组； 对于var列=0；列<8；列++{ 数据[行].推送{ rowNum:row+1， columnNum:列+1， x:xpos， y:ypos， 宽度：宽度， 高度:高度,， 和弦：随机和弦 } //增加x位置，即通过宽度变量将其移动 xpos+=宽度； } //行完成后重置x位置 xpos=1； //增加下一行的y位置。将其向下移动高度变量 ypos+=高度； } 返回数据； } 函数随机化和弦{ var textArray=['Cm'，'D7'，'Gm'，'Cdim'，'Am'，'Em']； 返回textArray[Math.floorMath.random*textArray.length]； } var gridData=gridConfig； var grid=d3.selectgrid .appendsvg .attrwidth，810px .高度890px； var row=grid.selectAll.row//select.row val from data .datagridData .enter.appendg .班，排 .附录 .attr类，列； var column=row.selectAll.square .datafunctiond{ 返回d； } 进来 .appendrect 一级，正方形 .attrx，函数d{ 返回d.x； } .attry，函数d{ 返回d.y； } .attrwidth，函数d{ 返回d.width； } .attr高度，功能{ 返回d.高度； } .stylefill，fff .stylestroke，222； var columnText=row.selectAll.column//select.column val from data .datafunctiond{ 返回d； } 进来 .附录文本 .textfunctiond{ 返回d.chord； } .attrrowNum，函数d{ 返回d.rowNum； } .attrcolumnNum，函数{ 返回d.columnNum； } .attrx，函数d{ 返回d.x+d.width/2； } .attry，函数d{ 返回d.y+d.height/2； } .attr文本锚定，中间 .主基线，中间 .stylefill，红色 .stylefont-weight，粗体 .字体大小，24；

.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")