D3.js地图缩放后路径方向标记变为弧线而非直线的问题排查与优化方案求助

我现在的需求很简单：想在路径上添加方向标记（类似示例里的样式）。目前我实现的代码在地图初始加载时能得到预期的效果，但当地图进行缩放操作后，这些方向标记却变成了弧线，而不是保持原本的直线状态。

以下是我目前用到的核心代码：

lineCoords.forEach(coords => {

    for (let i = 1; i < coords.length; i++) {
      const A = (coords[i - 1]);
      const B = (coords[i]);

      const interpolateA = d3.interpolate(A[0], B[0]);
      const interpolateB = d3.interpolate(A[1], B[1]);

      const spacing = 3;
      const distance = Math.hypot(A[0] - B[0], A[1] - B[1]);
      const numPoints = Math.max(1, Math.floor(distance / spacing));
      const range = d3.range(1, numPoints + 1);
      const points = range.map(j => {
        const t = j / (numPoints + 1);
        const interpolatedA = interpolateA(t);
        const interpolatedB = interpolateB(t);

        return [interpolatedA, interpolatedB];
      });

      onewayCoords.push(points);
    }

  })

这段代码是在拖拽事件里执行的，所以我觉得问题应该不是出在事件触发的时机上。我怀疑是坐标精度不足导致了这个问题，但还没找到确切的原因。

如果有更合适的实现方式能达到我想要的效果，或者有排查这个问题的思路，欢迎各位大佬分享见解！

备注：内容来源于stack exchange，提问作者harShu