Javascript 使用画布从一个div到另一个div绘制时间线

我有以下div标记

<div data-x="-1000" data-y="-1500">
// content
</div>
<div data-x="0" data-y="-1500">
// content
</div>

---

不幸的是，这条线是不正确的，它就像一条直线，就是这样。。有人能帮我解决这个问题吗？

你的想法是对的，但你的问题是画布不是在负坐标上绘制的

因此，必须将所有数据-x和数据-y映射到正坐标中

下面是一个将负值映射为正值的函数：

function mapRange(value, sourceLow, sourceHigh, mappedLow, mappedHigh) {
    return mappedLow + (mappedHigh - mappedLow) * (value - sourceLow) / (sourceHigh - sourceLow);
}

因此，在您的示例中，要将-300的data-x值映射到0-1000的屏幕范围，可以执行以下操作：

var x = mapRange(-300, -1500,0, 0,1000);  // The mapped x is 466.66.

您必须将div重新定位到映射的x，y坐标，这可以通过CSS实现

---

另一种方法是使用SVG创建实际的DOM元素，这些元素可以定位在负坐标上。

您能更好地解释这个问题吗？你所说的直线是什么意思？您的示例只有2个数据点（两个数据点的位置都不在画布上），因此绘制了一条从到1000像素长的垂直线的不可见直线段。是否要缩放直线，以使未知长度的未知数量的线段始终适合已知和预定义大小的绘图区域？

var x = mapRange(-300, -1500,0, 0,1000);  // The mapped x is 466.66.