如何在路径 d3.js 上放置文本答案

【问题标题】：How to place a text over a path d3.js如何在路径 d3.js 上放置文本
【发布时间】：2021-04-15 04:08:27
【问题描述】：

d3.js 有这个问题：我想将文本放在弧上。现在我使用的是textPath，效果是这样的：

有没有办法旋转 textPath？我想得到这样的效果：

这是我的代码：

       path.attr("d",d3.arc()
      .innerRadius(5)
      .outerRadius(55)
      .startAngle(Math.PI/2+angle-10 * (Math.PI / 180)) //converting from degs to radians
      .endAngle(Math.PI/2+angle+10*(Math.PI/180)))
      .attr("transform", function(d){return "translate("+d.x+","+d.y+") rotate("+nodesMap.get(node.id).degPathRotate+")"; })
      .attr("fill", function(d) { return "red"; })  
      .attr("opacity", 0.8)
      

    invisibleMap.get(node.id).angle = angle;
          
 vis.append("text")
 .append("textPath") //append a textPath to the text element
 .attr("xlink:href", "#"+'p'+node.id) //place the ID of the path here
 .text((nodesMap.get(node.id).totRels-nodesMap.get(node.id).shownRels))

【问题讨论】：

标签： javascript d3.js text path

【解决方案1】：

我不会为此使用textPath。相反，我只是使用一点三角函数明确地放置文本：

<!DOCTYPE html>

<html>
  <head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
      text {
        font-family: arial;
        font-weight: bold;
      }
      </style>
  </head>

  <body>
    <svg width="200" height="200"></svg>
    <script>

      var vis = d3.select('svg'),
          path = vis.append('path'),
          angle = 330,
          xPos = 100,
          yPos = 100,
          innerR = 5,
          outerR = 55;

      path
        .attr('id', 'sp')
        .attr(
          'd',
          d3
            .arc()
            .innerRadius(innerR)
            .outerRadius(outerR)
            .startAngle(Math.PI / 2 + angle - 10 * (Math.PI / 180)) //converting from degs to radians
            .endAngle(Math.PI / 2 + angle + 10 * (Math.PI / 180))
        )
        .attr('transform', function (d) {
          return (
            'translate(' +
            xPos +
            ',' +
            yPos +
            ') rotate(' +
            30 +
            ')'
          );
        })
        .attr('fill', function (d) {
          return 'red';
        })
        .attr('opacity', 0.8);

      vis
        .append('text')
        .text(20)
        //.append('textPath') //append a textPath to the text element
        //.attr('xlink:href', '#' + 'sp') //place the ID of the path here
        .attr("transform", function(){
          let l = outerR - innerR,
              x = (l * Math.cos(angle)) + xPos,
              y = (l * Math.sin(angle)) + yPos,
              bbox = this.getBBox();
          return "translate(" + x + "," + (y - bbox.height) + ")";
        })
    </script>
  </body>
</html>

【讨论】：