将数据转换为屏幕坐标 [英] Transforming data to screen coordinates

问题描述

我想使用函数在javascript中将数据转换为屏幕坐标。该函数看起来像这样：

I would like to transform data to screen coordinates in javascript using a function. The function has to look like this:

function createTransform(domain, range){
    // domain is a two-element array of the domain’s bounds
    // range is a two-element array of the range’s bounds
    // implement the actual calculation here
    var alpha = ...;
    var beta = ...;
    return function(x){
        return alpha * x + beta;
    };
}

// to use this for instance:
var tranform = createTransform([10, 20], [10, 20]);
console.log(transform(15));  // should log 15

我一直在看这个小时，但还是不明白。

I have been looking at this for hours but still do not understand it.

推荐答案

这是如何获取数据值并缩放以适合屏幕。使用映射函数计算给定特定数据值的所需屏幕值。

This is how to take your data values and scale them to fit onto the screen. It uses a mapping function to calculate a desired screen value given a specific data value.

function mapRange(value, dataLow, dataHigh, screenLow, screenHigh) {
    return screenLow +
         (value - dataLow) * (screenHigh - screenLow) / (dataHigh - dataLow);
}

工作原理

本质上，您必须缩放传入数据范围，以适合专用于显示数据的任何屏幕坐标范围。

At its essence, you must scale the incoming data range to fit inside the any range of screen coordinates that are dedicated to displaying the data.

您正在将一个范围缩放到另一个范围。您可以将缩放因子视为数据范围与屏幕范围的百分比。

You are scaling one range into another range. You might think of the scaling factor as a percentage of the data range versus the screen range.

// calculate the scaling factor required to fit the data inside the screen
var scalingFactor = screenRange / dataRange;

所有数据点都位于数据范围内，计算方式如下：

All data points fall inside the data range which is calculated like this:

// calculate the min/max range of all data
var dataRange= maximumDataValue – minimumDataValue;

所有屏幕坐标都位于屏幕范围内，计算方式如下：

All screen coordinates fall inside the screen range which is calculated like this:

// calculate the min/max range of all screen coordinates
//     that are dedicated to displaying the data
var screenRange = maximumScreenCoordinateValue – minimumScreenCoordinateValue;

如果要使用全屏，则 screenRange 成为屏幕宽度。

If you want to use the full screen then the screenRange becomes the screen width.

下一步是计算整个数据范围内特定数据点的相对位置：

The next step is to calculate the relative position of a specific data-point inside the full data range:

// calculate any one specified data-point's relative position within
// the full data range
var thisDatumPositionInDataRange = thisDataValue – minimumDataValue;

最后，使用 scalingFactor

// calculate the screen coordinate where the specified dataum
//    will be displayed
var screenCoordinate = minimumScreenValue + thisDatumPositionInDataRange * scalingFactor;

换句话说，这个计算意味着：

In words, this calculation means:

•从最小（==最左）屏幕坐标开始。

• Start at the minimum (==leftmost) screen coordinate.

•在屏幕上向上移动指定数据的相对位置 scalingFactor 。

• Move righward on the screen by the specified datum’s relative position (in its data range) scaled by the scalingFactor.

下面是注释代码示例：

// supply a data value (value)
// and supply the min & max of the datum and the screen size
// return value mapped to fit onto the screen
function mapRange(value, dataLow, dataHigh, screenLow, screenHigh) {
    return screenLow + (screenHigh - screenLow) * (value - dataLow) / (dataHigh - dataLow);
}

// calculate the max & min of a given array
function calcDataMinMax(a){
    var min=1000000;
    var max=-1000000;
    for(var i=0;i<a.length;i++){
        var value=a[i];
        if(value<min){min=value;}
        if(value>max){max=value;}
    }
    return({min:min,max:max});
}

// Usage:

// example data
var data=[5,10,-3,20,0,2];

// example screen width
var screenWidthMin=0;
var screenWidthMax=640;

// calc the min and max of values in your data
var dataRange=calcDataMinMax(data);

// map the data value 8 to fit onto the screenWidth
var map8=mapRange(8,dataRange.min,dataRange.max,0,100);

这篇关于将数据转换为屏幕坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！