JavaScript坐标精度问题：如何确保红/蓝圆Y坐标完全一致？

我在一个大圆的0、90、180、270度位置放置了4个小圆，预期红圆与蓝圆的y坐标完全相同（仅水平偏移），绿圆与粉圆的x坐标完全相同（仅垂直偏移）。但实际计算后，红圆y坐标为237.76900370542438，蓝圆为237.7690037054244，存在微小差异，导致后续计算出错。

相关代码 #

JavaScript代码

const angle = [0, 90, 180, 270];
const angleCoord = [];

angle.forEach(
    (a, i) => {
        const element = d3.select('.circ1').node();
        const cx = parseFloat(element.getAttribute('cx'));
        const cy = parseFloat(element.getAttribute('cy'));
        const r = parseFloat(element.getAttribute('r'));
        const x = cx + Math.cos(a * Math.PI / 180) * r;
        const y = cy + Math.sin(a * Math.PI / 180) * r;
        angleCoord.push({
            angle: a,
            x: x,
            y: y
        })
    }
);

const color = ['red', 'green', 'blue', 'pink'];

d3.select('svg').append('g')
    .attr('class', 'circles')
    .selectAll('circle')
    .data(angleCoord)
    .join('circle')
    .attr('class', (_, i) => color[i])
    .attr('cx', d => d.x)
    .attr('cy', d => d.y)
    .attr('r', '4')
    .attr('fill', (_, i) => color[i]);

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <script type="text/javascript" src='https://cdn.jsdelivr.net/npm/bignumber.js@9.1.2/bignumber.min.js'></script>
  <body>
    <div id="container" class="svg-container"></div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 720">
      <circle class="circ1" cx="384" cy="237.76900370542438" r="122.23099629457562" fill="none" stroke="black"></circle>
    </svg>
    <script src="prod3.js"></script>
  </body>
</html>

问题根源 #

• IEEE 754浮点数精度限制：JavaScript采用双精度浮点数存储数值，无法精确表示所有十进制小数。当你通过parseFloat读取DOM中的高精度十进制值，再结合Math.cos/Math.sin的计算结果，会引入微小的舍入误差，最终导致看似相同的坐标出现末尾数字差异。
• 冗余DOM读取：循环内重复读取.circ1的属性虽然不直接引发误差，但属于低效操作，应优化到循环外。

解决方案 #

方案1：利用角度特性硬编码坐标（最优解） #

对于0/90/180/270这类90度倍数的角度，完全不需要三角函数计算，直接基于大圆的圆心和半径推导坐标，从根源避免浮点误差：

// 只读取一次DOM属性，提升效率
const element = d3.select('.circ1').node();
const cx = parseFloat(element.getAttribute('cx'));
const cy = parseFloat(element.getAttribute('cy'));
const r = parseFloat(element.getAttribute('r'));

// 直接按角度的几何特性生成坐标，保证绝对一致
const angleCoord = [
  { angle: 0, x: cx + r, y: cy },
  { angle: 90, x: cx, y: cy - r },
  { angle: 180, x: cx - r, y: cy },
  { angle: 270, x: cx, y: cy + r }
];

方案2：固定精度截断/四舍五入 #

如果后续需要支持任意角度计算，可以对结果进行固定精度的格式化，消除微小误差：

// 先把DOM读取提到循环外
const element = d3.select('.circ1').node();
const cx = parseFloat(element.getAttribute('cx'));
const cy = parseFloat(element.getAttribute('cy'));
const r = parseFloat(element.getAttribute('r'));
const fixedPrecision = 10; // 可根据需求调整精度位数

angle.forEach((a, i) => {
    const x = parseFloat((cx + Math.cos(a * Math.PI / 180) * r).toFixed(fixedPrecision));
    const y = parseFloat((cy + Math.sin(a * Math.PI / 180) * r).toFixed(fixedPrecision));
    angleCoord.push({ angle: a, x, y });
});

方案3：使用BigNumber处理精确计算 #

利用已引入的bignumber.js库处理数值计算，避免浮点数精度损失：

const element = d3.select('.circ1').node();
// 用BigNumber读取精确的十进制值
const cx = new BigNumber(element.getAttribute('cx'));
const cy = new BigNumber(element.getAttribute('cy'));
const r = new BigNumber(element.getAttribute('r'));

angle.forEach((a, i) => {
  let cosVal, sinVal;
  // 90度倍数角度直接用精确值，无需计算三角函数
  switch(a) {
    case 0: cosVal = new BigNumber(1); sinVal = new BigNumber(0); break;
    case 90: cosVal = new BigNumber(0); sinVal = new BigNumber(1); break;
    case 180: cosVal = new BigNumber(-1); sinVal = new BigNumber(0); break;
    case 270: cosVal = new BigNumber(0); sinVal = new BigNumber(-1); break;
    default:
      // 非特殊角度时转换为弧度计算（若需要）
      const rad = new BigNumber(a).times(Math.PI).div(180);
      cosVal = new BigNumber(Math.cos(rad.toNumber()));
      sinVal = new BigNumber(Math.sin(rad.toNumber()));
  }
  const x = cx.plus(cosVal.times(r)).toNumber();
  const y = cy.plus(sinVal.times(r)).toNumber();
  angleCoord.push({ angle: a, x, y });
});

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