javascript - ¿Cómo puedo centrar el texto en un rectángulo de cuadrícula SVG de D3.js?

¿Cómo puedo centrar el texto tanto horizontal como verticalmente en un rectángulo de una cuadrícula SVG de D3.js?

Aquí está el ejemplo que estoy tratando de hacer funcionar:

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

Y aquí es cómo se ve. Quiero que el texto 'Gm' esté centrado en la primera celda. Si intento ajustarlo hacia abajo, el texto desaparece al pasar el borde superior de la celda.

Respuesta #1

Mueve la posición x y y por la mitad del ancho/alto:

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

Y establezca tanto text-anchor como dominant-baseline en middle:

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

Finalmente, mueve los textos a la parte superior de los rectángulos (es decir, añádelos después).

Aquí está tu código con esos cambios:

function gridConfig() {
  var data = new Array();
  var xpos = 1; //starting xpos and ypos at 1 so the stroke will show when we make the grid below
  var ypos = 80;
  var width = 80;
  var height = 80;
  var click = 0;

  for (var row = 0; row < 8; row++) {
    data.push(new Array());
    for (var column = 0; column < 8; column++) {
      data[row].push({
        rowNum: row + 1,
        columnNum: column + 1,
        x: xpos,
        y: ypos,
        width: width,
        height: height,
        chord: randomChord()
      })
      // increment the x position. I.e. move it over by width variable
      xpos += width;
    }
    // reset the x position after a row is complete
    xpos = 1;
    // increment the y position for the next row. Move it down height variable
    ypos += height;
  }
  return data;
}

function randomChord() {
  var textArray = ['Cm', 'D7', 'Gm', 'Cdim', 'Am', 'Em'];
  return textArray[Math.floor(Math.random() * textArray.length)];
}

var gridData = gridConfig();

var grid = d3.select("#grid")
  .append("svg")
  .attr("width", "810px")
  .attr("height", "890px");

var row = grid.selectAll(".row") // select .row val from data
  .data(gridData)
  .enter().append("g")
  .attr("class", "row")
  .append("g")
  .attr("class", "column");

var column = row.selectAll(".square")
  .data(function(d) {
    return d;
  })
  .enter()
  .append("rect")
  .attr("class", "square")
  .attr("x", function(d) {
    return d.x;
  })
  .attr("y", function(d) {
    return d.y;
  })
  .attr("width", function(d) {
    return d.width;
  })
  .attr("height", function(d) {
    return d.height;
  })
  .style("fill", "#fff")
  .style("stroke", "#222");

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("rowNum", function(d) {
    return d.rowNum;
  })
  .attr("columnNum", function(d) {
    return d.columnNum;
  })
  .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")
  .style("fill", "red")
  .style("font-weight", "bold")
  .style("font-size", "24");

<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script src="grid.js" type="text/javascript"></script>
</body>
</html>