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

Question

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

我看了Scott Murray's book，但我不知道如何计算它。

我有这个：

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个？我该如何计算这个值？

我也阅读this tutorial，它解释了如何计算它，但是当我按照方法操作时，我得不到相同的值，即scale(300)不返回{{1} }。

知道为什么吗？

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的输出（范围）（如your comment所示）。很简单：

这给了我们...... 31.25 ！

Answer 2

是的，我会尝试解释为什么你会得到180。

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

因此，在范围内我们也这样做：
350 - 10 / 2 = 170 然后我们添加起点 170 + 10 = 180