图的数学方程答案

【问题标题】：Math equation for graph图的数学方程
【发布时间】：2011-10-19 16:06:28
【问题描述】：

我正在研究一个使用画布的图形类（在 javascript 中）。这仅用于实验/学习目的。目前，图表根据画布设置的任何高度和宽度正确缩放。这不是问题，这基本上就是我正在做的绘制正确坐标[伪代码]。

point[0] = [10, 15]
point[1] = [20, 10]
point[2] = [30, 20]
point[3] = [40, 15]

canvas width = 300
max x = 40

so for any given point:

position x = ( point[i][0] / max x ) * canvas width

足够简单。我得到一个比率，然后将其乘以画布宽度以将其绘制在正确的像素处。

然而，问题在于提出了一个方程，它会导致 x 的最小值位于图形的 x 坐标上的 0 处，而最大值位于图形的最大值点（它已经确实是因为我当前等式中的 1:1 比率）。目前 x 的最小值（示例中为 10）位于 x 坐标的 75px 处，因为 1:4 的比例乘以画布的宽度。

tldr / 摘要： 我需要制作一个图表，其中最小值绘制在图表的开头（0,0），最大值绘制到结尾.

【问题讨论】：

您需要值的范围，缩放轴以使图形成为范围的大小，并将所有值缩放为 (value - min_value) * 比例因子。

标签： javascript math graph equation

【解决方案1】：

首先尝试计算每点像素宽度的值。

例如

widthPerPoint =  canvasWidth / (maxX - minX)

那么你的位置可以通过减去最小值归一化为零：

position = widthPerPoint * (point[i][0] - minX)

你的第一个例子

widthPerPoint = 300 / (40 - 10) = 10

position = 10 * (point[i][0] - 10) = 10 * 0 = 0

对于其他人：

  point[0] = [10, 15] -> 0
  point[1] = [20, 10] -> 100
  point[2] = [30, 20] -> 200
  point[3] = [40, 15] -> 300

至少我认为这会起作用....

【讨论】：

【解决方案2】：

只需循环你的观点并记录你的发现（抱歉，我不会在 JavaScript 中进行算法编程。伪 Python 要容易得多）：

minimum = [infinity, infinity, -1]
maximum = [-infinity, -infinity, -1]

for point in points:
  if point.x > maximum.x and point.y > maximum.y:
    maximum = [point.x, point.y, point.index]

  if point.x < minimum.x and point.y < minimum.y:
    minimum = [point.x, point.y, point.index]

if maximum.index == -1:
  print 'No point is a maximum, so the points all lie in a horizontal line.'

  maximum = [points[0].x, points[0].y, 0]
  minimum = [points[0].x, points[0].y, 0]

【讨论】：

【解决方案3】：

您需要将范围 [min_x, max_x] 线性映射到 [0, width]。一个点x = point[i][0] 映射到

position(x) = width/(max_x - min_x) * (x - min_x).

【讨论】：

【解决方案4】：

不确定我是否正确理解了您的问题。如果是这样，这是等式：

position x = (point[i][0] - min x) * canvas width / (max x - min x)

这样，当point[i][0] 最小 (min x) 时，您的值是 0.0.，而当它最大 (max x) 时，值是 canvas width，呈线性增长。

【讨论】：