当点向上/向下移动时，线性移动图中的点，并且边缘值应在 Javascript 中固定

Question

我有一个图表，其中随机绘制一条线，当我们向上/向下移动一个点时，其他点应该更新值，以便出现新的线性图。

在图像中，蓝线是原始线，当一个点向上移动时，您可以看到红线。现在如何计算新点以使其形成线性绿线。

我认为它应该与线性方程相关，例如计算斜率，然后将其添加到其他值，但我认为它不起作用。也许我做错了什么

Answer 1

这可以通过将图形分成两条直线并插入中间值来完成。

插值的基本示例

假设您有一个包含 4 个项目的列表，它们形成一条直线，但只知道第一个和最后一个值：

[ 5, ??, ??, 14]

为了获取这些缺失值，我们可以计算每个值相对于之前的值的变化步长：

获取最后一项和第一项之间的差异

14 - 5 = 9

，然后除以要采取的步数

4 - 1 = 3

。这给我们提供了

9 / 3 = 3

的步长。

将步长应用于您的数据：

[ 5+(3*0), 5+(3*1), 5+(3*2), 5+(3*3) ]

或

[ 5, 8, 11, 14 ]

回到你的问题

因为您将有 3 个固定点，所以您将得到 2 条线。第一行是从第一个值到您更改的值。第二行是从更改的值到最后一个值。

以下是如何做到这一点的示例：

function moveDatapoint(data, changedIndex, changedValue) {
  if (data != null && changedIndex > 0 && changedIndex < data.length - 1) {
    // first line
    let diff = changedValue - data[0] // the change from start point to the changed point
    let stepsize = diff / changedIndex
    for (let i = 1; i < changedIndex; i++) {
      data[i] = data[0] + stepsize * i
    }

    // changed point
    data[changedIndex] = changedValue

    // second line
    diff = data[data.length - 1] - changedValue // the change from changed point to the last point
    stepsize = diff / (data.length - changedIndex)
    for (let i = changedIndex + 1; i < data.length - 1; i++) {
      data[i] = changedValue + stepsize * (i - changedIndex + 1)
    }
  }
}

//             Jan  Feb  Mar  Apr  May Jun Jul Aug Sep Oct Nov Dec
let myData = [600, 580, 470, 395, 300, 90, 90, 90, 89, 88, 86, 83]
console.log("Original data:")
console.log(myData)

moveDatapoint(myData, 7, 600)
console.log("After moving datapoint:")
console.log(myData)