Question

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

效果很好！除了有时候。众所周知，这是令人沮丧的，因为它应该工作或不工作。

我们在图表底部有一个垂直位置（如果有的话），从图表底部开始的当前点的垂直位置，以及它们之间的水平空间。

所有计算都是总空间的百分比。

通过样式维持宽高比。这是用于返回结果倾斜样式的函数：

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()从切线返回一个角度。要解决此问题，请根据距离计算角度：

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

通常，从坐标计算角度时，使用Math.atan2()方法更安全。它还返回一个90°和270°角的值（即当分频器为零时）。