如何实现圆形标签等距外圈且居中径向排列？

我绘制了如下圆形：

可以看到，0至9号标签与其他标签到外圈的距离存在差异。我的需求如下：

• 如何让所有标签到外圈的距离保持一致？
• 如何将标签排列在从圆心出发的线段中间，而非侧边？

我的代码可在此查看：https://jsfiddle.net/ao4xwpnk/

我曾尝试修改以下代码以实现标签对称，但未成功：

let featureData = features.map((f, i) => {
  let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
  let isLeftHalf = angle < Math.PI; // Check if the angle is in the left half of the circle

  let value = isLeftHalf ? 14.5 : 10.5; // Adjust the value for labels in left and right halves

  return {
    "name": f,
    "angle": angle,
    "line_coord": angleToCoordinate(angle, 180),
    "label_coord": angleToCoordinate(angle, value)
  };
});

1. 统一所有标签到外圈的距离 #

你之前的代码通过isLeftHalf为左右半区标签设置了不同的value（14.5和10.5），这是导致标签到圆心距离不一致的直接原因，进而造成到外圈的距离有差异。要统一距离，只需去掉左右区分逻辑，给所有标签设置同一个固定的value值即可，示例代码如下：

let featureData = features.map((f, i) => {
  let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
  // 统一设置标签到圆心的距离，数值可根据实际布局调整
  let value = 12.5;

  return {
    "name": f,
    "angle": angle,
    "line_coord": angleToCoordinate(angle, 180),
    "label_coord": angleToCoordinate(angle, value)
  };
});

这样所有标签到圆心的距离一致，在外圈半径固定的情况下，到外圈的距离就会完全相同。

2. 将标签排列在线段中间 #

要让标签处于圆心出发的线段中间，需要调整标签的对齐方式和定位逻辑：

• 给标签元素添加CSS样式，让元素以自身中心为定位基准：

.label {
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  transform-origin: center; /* 确保旋转等变换以中心为原点 */
}

• 确保angleToCoordinate函数计算的是标签中心的坐标，若函数原本返回的是左上角坐标，上述CSS的translate(-50%, -50%)会自动将标签中心对齐到目标坐标点，从而让标签处于线段中间位置。

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