文字未出现在圆圈 D3 中

Question

我正在尝试将由弧连接的圆圈内的文本居中。我看过其他 StackOverflow 答案，但没有一个能解决我的问题。我知道将每个圆形元素包装在一个 g 元素中，然后附加我在下面做的文本。如果有人可以帮助我，将不胜感激。

let svg = d3.select("body").append('svg').attr('viewBox', '0 0 ' + width + ' ' + boxHeight);
    let nodes: any = [[width / 2, boxHeight / 1.5], [width / 4, boxHeight / 3], [width / 1.5, boxHeight / 3]];
    let g = svg.append('g')
    for (let i = 0; i < nodes.length; i++) {
      g
        .append('circle')
        .attr('cx', nodes[i][0])
        .attr('cy', nodes[i][1])
        .attr('r', 40).style('stroke', 'green')
        .style('fill', 'none')
      g.append('text').attr('fill', 'black').text('Hello')
    }

    let links: any = [];
    // Link from the first node to the second
    links.push(
      d3.linkHorizontal()({
        source: nodes[0],
        target: nodes[1]
      })
    );

    // Link from the first node to the third
    links.push(
      d3.linkHorizontal()({
        source: nodes[0],
        target: nodes[2]
      })
    );

    // Append the links to the svg element
    for (let i = 0; i < links.length; i++) {
      svg
        .append('path')
        .attr('d', links[i])
        .attr('stroke', 'black')
        .attr('fill', 'none');
    }

Answer 1

你定位圆圈，

g.append('circle')
  .attr('cx', nodes[i][0])
  .attr('cy', nodes[i][1])

但不是文字，

g.append('text').attr('fill', 'black').text('Hello')

所以它可能出现在屏幕的左上角（文本基线为 0，因此您可能会看到部分字母低于基线。

相反，您可以定位 g。然后附加子文本，圆圈：

 let node = g.selectAll(null)
  .data(nodes)
  .enter()
  .append("g")
  .attr("transform", d=>"translate("+d+")");

 node.append("circle") 
    .attr('r', 40).style('stroke', 'green')
    .style('fill', 'none')

 node.append("text") 
    .text("Hello")
    .style("text-anchor","middle")
    .style("dominant-baseline","middle");

例如：

let g = d3.select("body").append("svg").append("g");
 
let nodes = [[100,100],[200,100]]
 
 
let node = g.selectAll(null)
      .data(nodes)
      .enter()
      .append("g")
      .attr("transform", d=>"translate("+d+")");

node.append("circle") 
        .attr('r', 40).style('stroke', 'green')
        .style('fill', 'none')

node.append("text") 
        .text("Hello")
        .style("text-anchor","middle")
        .style("dominant-baseline","middle");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

否则，您可以使用与圆的 cx/cy 值相同的 x,y 值定位文本，并使用 text-anchor 和占主导地位的基线属性将文本置于该值的中心：

let g = d3.select("body").append("svg").append("g");
 
let nodes = [[100,100],[200,100]]
 
 
let node = g.selectAll(null)
      .data(nodes)
      .enter()
      .append("g")

node.append("circle") 
        .attr('r', 40).style('stroke', 'green')
        .style('fill', 'none')
        .attr("cx", d=>d[0])
        .attr("cy", d=>d[1]);

node.append("text") 
        .text("Hello")
        .style("text-anchor","middle")
        .style("dominant-baseline","middle")
        .attr("x", d=>d[0])
        .attr("y", d=>d[1]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>