如何在D3.js绘制的圆弧末端（终止角度）的圆形内添加文本？

要在圆弧的终止角度位置的圆形内添加文本，我们可以分三步实现：计算末端坐标、绘制圆形容器、添加居中对齐的文本。下面是修改后的完整代码示例，我会逐部分解释细节：

完整代码实现 #

// 创建SVG容器（简化了你原有的嵌套svg结构，避免冗余）
var svgContainer = d3.select("body").append("svg")
  .attr("width", 350)
  .attr("height", 350)
  .append("g")
  .attr("transform", "translate(50, 50)"); // 平移坐标系，方便定位

// 圆弧核心参数
var outerRadius = 40;
var strokeWidth = 5;
var endAngle = 5; // 你的终止角度（注意D3使用弧度值）

// 创建圆弧生成器
var outerArc = d3.arc()
  .innerRadius(outerRadius - strokeWidth) // 让圆弧有实际宽度，若只需线条可改回outerRadius
  .outerRadius(outerRadius)
  .startAngle(0)
  .endAngle(endAngle);

// 绘制圆弧
svgContainer.append("path")
  .attr("d", outerArc)
  .style("fill", "none")
  .style("stroke", "#2c3e50")
  .style("stroke-width", strokeWidth);

// 计算圆弧末端的坐标
// D3的角度从y轴正方向（12点钟）顺时针递增，需转换为笛卡尔坐标系
var endX = outerRadius * Math.cos(endAngle - Math.PI/2);
var endY = outerRadius * Math.sin(endAngle - Math.PI/2);

// 绘制末端的圆形容器
var circleSize = 12; // 可根据需求调整圆形大小
svgContainer.append("circle")
  .attr("cx", endX)
  .attr("cy", endY)
  .attr("r", circleSize)
  .style("fill", "#ecf0f1")
  .style("stroke", "#2c3e50")
  .style("stroke-width", 1);

// 在圆形内添加居中对齐的文本
svgContainer.append("text")
  .attr("x", endX)
  .attr("y", endY)
  .attr("text-anchor", "middle") // 水平居中
  .attr("dominant-baseline", "middle") // 垂直居中
  .style("font-size", "10px")
  .style("fill", "#2c3e50")
  .text("End"); // 替换为你需要的文本内容

关键细节说明 #

• 坐标转换：D3的弧度坐标系以y轴正方向为0度，顺时针递增，所以我们通过Math.cos(endAngle - Math.PI/2)和Math.sin(endAngle - Math.PI/2)将角度转换为标准笛卡尔坐标系的坐标，确保点准确落在圆弧末端。
• 文本居中：text-anchor="middle"和dominant-baseline="middle"两个属性配合，能让文本完美居中在圆形内部，避免偏移。
• 圆弧样式：我调整了innerRadius让圆弧有实际宽度，如果你只需要一条细线，改回innerRadius(outerRadius)即可。

内容的提问来源于stack exchange，提问作者Dally S