如何计算d3.js中的范围？

Question

我是d3.js库的新手,我正在尝试理解域和范围的概念.

我读过斯科特·默里的书,但我不知道如何计算它.

我有这个:

var scale = d3.scale.linear()
    .domain([100, 500])
    .range([10, 350]);

scale(100);  //Returns 10
scale(300);  //Returns 180
scale(500);  //Returns 350

我知道我输入的100个单位在我的输出中代表10个,而500和350个相同...但为什么180作为输入返回300？我该如何计算这个值？

我也阅读了本教程,它解释了如何计算它,但是当我按照方法时,我得不到相同的值,即scale(300)不返回180.

知道为什么吗？

Answer 1

线的方程

要获得D3线性标度中使用的公式,您只需要了解这种标度使用线性插值.简单来说,您所需要的只是您传递给D3比例生成器的两个点所创建的线的等式.

在你的例子中:

.domain([100, 500])
.range([10, 350]);

使用(x,y)坐标系给我们两点:

• 第一点是100,10(x = 100和y = 10)
• 第二点是500,350(x = 500和y = 350)

请记住,在我的解释中,x轴表示数学中称为域(在D3术语中,也称为域),即输入值集合,而y轴表示数学中称为图像的内容(在D3术语,范围),即输出值的集合.

所以,使用这两点,这就是你得到的那一行:

现在让我们直观地解释像这样的线性比例:

选择x轴中的任何点(它甚至可以在域外).这是您的输入值(在域中).向上(或向下)直到越过红线.穿过红线的点的y坐标对应于输出值(在图像或范围内).

现在,回到等式:

有了我们的2分,我们现在可以计算出线的方程.

该线的一般方程是:

其中y(在大多数数学书籍中也称为f(x))是范围,x是域.

第一步是找到m,我们可以用4点来做:

请记住:

• x1是域数组中的第一个值(= 100)
• x2是域数组中的最后一个值(= 500)
• y1是范围数组中的第一个值(= 10)
• y2是范围数组中的最后一个值(= 350)

将所有这四个值放在等式中,它给出了m是17/20.

现在,解决b的等式(使用两点中的任何一点)......

......我们的b是-75,它给出了我们的最终方程式:

就是这样.使用此等式,您可以获得相对于任何域输入的图像(范围)中的任何点.

例:

让我们计算125的输出(范围)(如评论中所示).很容易:

这给了我们...... 31.25!

Answer 2

是的，我会尽力解释为什么你会得到 180。

我们知道 300 是理想情况下将您的域划分为两个相同大小的子域的值，因此我们可以这样做：（ 500 - 100 / 2 = 200这是子域大小），这意味着中间值位于：（
200 + 100 = 300请注意，我们添加起始值观点100）

所以对于范围我们做同样的事情：
350 - 10 / 2 = 170 然后我们添加起点 170 + 10 = 180