Javascript 角度计算只是有时出错

Question

我正在使用 D3 和良好的旧 div 而不是 svg 创建折线图。部分是作为我自己的练习，也因为它很容易灵活和动态，无需监听页面大小调整。

效果很好！除了有时候。众所周知，这令人沮丧，因为它要么有效，要么无效。

我们有上一个点（如果有的话）从图表底部的垂直位置，当前点从图表底部的垂直位置，以及之间的水平 space他们。

所有计算都是占总数的百分比 space。

宽高比通过样式保持。这是用于 return 生成的倾斜样式的函数：

var angle = Math.tan(heightBetweenPoints/widthBetweenPoints);
return "skewY(" + Math.atan(angle) * (180/Math.PI) * (-1) + "deg)";

我的线条样式是：

  position: absolute;
  bottom:-3px;
  right:0;
  width:100%;
  height:2px;
  transform-origin:100% 100%;

大多数线路都有效...但有时却无效。

我上次触发已经一分钟了，但我相信这是正确的计算。我在想，要么是我弄错了，要么是 JavaScript 遗漏了什么。

我知道并模糊地理解 JavaScript 中的舍入问题。我也尝试过使用 math 库进行此操作，认为这可能是一个错误，但每个生成的图表似乎是相同的。

Answer 1

heightBetweenPoints/widthBetweenPoints 已经是切线了。 atan() returns 与切线的角度。要解决此问题，请根据距离计算角度：

return "skewY(" + Math.atan(heightBetweenPoints / widthBetweenPoints) * (180 / Math.PI) * (-1) + "deg)";

一般情况下，从坐标计算角度时，使用Math.atan2()方法比较安全。它 returns 也是 90° 和 270° 角的值（即当分频器为零时）。

Javascript angle calculation only sometimes wrong