如何在Angular 9中用D3.js在螺旋图上正确定位度数标记

我帮你分析下问题根源，然后给出对应的解决方案：

首先，你的SVG螺旋路径是从右上角的410度开始绘制，一直延伸到左下角的**-140度**结束，而你原有的度数映射逻辑没有匹配这个路径方向；同时0度在-140到410的度数区间里本身就不是中点（区间中点是135度），这两个因素叠加导致0度位置偏右，没落在你期望的视觉中心。

方案一：让度数线性匹配路径方向（0度按比例落在路径上） #

这个方案保持度数和路径长度的线性对应，仅修正路径方向的匹配问题：

function setDegree(min, max, currentDegree, svg, circle) {
  const pathNode = svg.select("path").node();
  const totalPathLength = pathNode.getTotalLength();
  
  // 关键修正：把度数范围从[max, min]映射到路径长度[0, 总长度]
  // 这样410度对应路径起点（长度0），-140度对应路径终点（总长度）
  const degreeToPath = d3.scaleLinear()
    .domain([max, min])
    .range([0, totalPathLength]);

  const currentPathLength = degreeToPath(currentDegree);
  // 直接用计算出的路径长度取点，不用再反向
  const pathPoint = pathNode.getPointAtLength(currentPathLength);

  circle
    .transition()
    .duration(300)
    .attr("cx", pathPoint.x)
    .attr("cy", pathPoint.y);
}

const svg = d3.select("svg");
const circle = d3.select("#cur_pos");
setDegree(-140, 410, 0, svg, circle);

方案二：强制0度落在视觉中心（路径中点） #

如果你的设计要求0度必须在螺旋的几何中点（不管度数区间的比例），可以用分段线性映射来实现：

function setDegree(min, max, currentDegree, svg, circle) {
  const pathNode = svg.select("path").node();
  const totalPathLength = pathNode.getTotalLength();
  const midPathLength = totalPathLength / 2; // 路径的中点位置
  
  // 定义三个关键点的映射：410度→路径起点，0度→路径中点，-140度→路径终点
  const degreeToPath = d3.scaleLinear()
    .domain([410, 0, -140])
    .range([0, midPathLength, totalPathLength]);

  const currentPathLength = degreeToPath(currentDegree);
  const pathPoint = pathNode.getPointAtLength(currentPathLength);

  circle
    .transition()
    .duration(300)
    .attr("cx", pathPoint.x)
    .attr("cy", pathPoint.y);
}

原代码的问题拆解 #

1. 路径方向不匹配：你原代码把-140度映射到路径长度0，但实际路径起点是410度，方向完全相反，导致位置计算颠倒。
2. 度数区间中点偏差：-140到410的度数区间中点是135度，不是0度，所以线性映射后0度自然不会落在路径的视觉中心——如果需要0度在中心，必须自定义映射规则。

你可以根据自己的实际需求选择上面的方案，测试后应该就能解决位置偏移的问题了。

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