Javascript Css与js图

我有一个由div组成的图表（基本上是上下相连的线），它指示当前温度是升高还是降低。我有一系列的温度，根据它们我可以这样做：

let denivelationPerStep = 17;
let bottomPadding = 20;
// calc of prevTemp and angle
let shift = prevTemp * denivelationPerStep + bottomPadding;
dom.style.bottom = shift + 'px';
dom.style.transform = 'rotate(' + angle + 'deg)';

在我做这个计算之前，所有的div都是水平线，基本上形成一条直线。我调整每个下一个div，将其向上或向下推，并相应地旋转。 它在某些温度下（比如5到20度）工作正常。在这之后，构成图的div开始走得太远（超出其父div）。我的问题是，如何规范底部移动和旋转，以便即使温度为-20度，div也不会走得太远，但仍将保持在其父div中。我认为解决方案可能是根据数组中的最高和最低温度调整底部填充和denivelationPerStep。对吗？什么是好的解决方案（公式）？谢谢

两个例子是： 及

---

. 在其中一张图片中，图形完全消失。

请包含一个最小的可验证工作示例，以演示手头的问题。如果没有代码重现手头的问题，很难提供帮助。说真的，这是一个简单的多列天气图，并不是互联网所独有的。复制一些类似的东西，显示相同的问题，那不是“专有代码”，我们只需要一些显示相同行为的东西，你希望修复好的，我今晚回家后再做。无论如何谢谢你：）我解决了这个问题。我必须定义一个映射函数，将区间[4,10]之外的温度映射到该区间。就这些。无论如何，谢谢！：）是的，这种事经常发生在我身上！谢谢，伙计！祝您今天过得愉快。