logo标签列表

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

javascriptcsssvgd3.js
6

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

这是我正在尝试使其工作的示例：

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”文本居中。如果我试图向下调整，当文本超过单元格的顶部边界时，文本会消失。

enter image description here

enter image description here

1个回答
4

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

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

这是您的代码，经过以上更改：

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接