Математическое уравнение для графа

Question

Я работаю над графическим классом (в javascript), который использует canvas. Это только для экспериментальных / учебных целей. В настоящее время график корректно масштабируется в зависимости от высоты и ширины холста. Это не проблема, и вот в основном то, что я делаю, чтобы построить правильные координаты [псевдокод].

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 находиться в 0 на координате x графика, а максимальное значение - в максимальной точке графика (которое уже делает из-за отношения 1: 1 в моем текущем уравнении). В настоящее время минимальное значение x (в данном примере 10) находится в 75px в координате x, поскольку отношение 1: 4 умножается на ширину холста.

tldr / summary: Мне нужно составить график, на котором минимальное значение отображается в начале графика (0,0), а максимальное значение - до конца.

Answer 1

Вам необходимо отобразить линейно диапазон от [min_x, max_x] до [0, width]. Точка x = point[i][0] отображается на

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

Answer 2

попробуйте сначала вычислить значение ширины пикселя на точку.

, например

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

по крайней мере, я думаю, что это сработает ....

Answer 3

Не уверен, что правильно понял ваш вопрос.Если так, то это уравнение:

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

Таким образом, когда point[i][0] минимально (min x), ваше значение равно 0.0., а когда оно максимально (max x), значение равно1008 *, растет линейно.

Answer 4

Просто прокрутите ваши точки и запишите, что вы нашли (извините, я не могу программировать алгоритмы на 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]