javascript - d3插值示例说明

Question

我可以确认我对以下代码中发生的情况的理解吗？

var color = d3.scale.linear()
    .range(["hsl(-180,50%,50%)", "hsl(180,50%,50%)"])
    .interpolate(interpolateHsl);

我们正在定义一个称为颜色的缩放函数(不确定为什么我们能够将变量定义为函数，但我已经学会接受这一点 - 澄清会有所帮助)。

没有指定域，因为使用 .interpolate() 只适用于 0 到 1 之间的域？或者因为在这种情况下域==范围？还是其他什么原因？

从插值函数调用 interpolateHsl 需要范围(a 和 b)的起点和终点的“隐式参数”(无需指定 - 它们是称为隐式参数还是其他引用？)。

function interpolateHsl(a, b) {
    var i = d3.interpolateString(a, b);
    return function(t) {
        return d3.hsl(i(t));
    }
}

现在我们在 interpolateHsl 中定义一个插值 fn 来插值字符串 - 我认为这将采用 ['calibri 12px', 'calibri 24px']，拔出数字部分并对其进行插值，然后重新加入文本元素？那么在这种情况下，它会从 hsl 字符串中提取数字分量并对其进行插值？

现在(如果还不够的话)它变得非常困惑。

t 是“增量” - 因此，如果总插值时间为 5000 毫秒，并且我们有 5 个步骤的离散范围，那么 t = 1000 毫秒？那么在连续的上下文中它非常小？

i(t) 将计算“时间”t 处的插值，然后通过 d3.hsl() 将其转换为真正的 hsl 值，而不仅仅是字符串表示形式。

为什么这必须在函数内的函数中？要访问t？

总的来说，我的理解并不完整，因此对正在发生的事情进行更广泛的解释将非常有帮助。

Answer 1

1. 在 Javascript 中，您可以使用 var 和 function 来声明函数(参见 this question )——函数是语言，可以像变量一样传递。

2. 没有指定域，因为默认值 ([0,1]) 就足够了。没有其他原因，特别是它不受范围或插值器设置的影响。

3. interpolate() 将工厂作为参数(请参阅 the documentation )。也就是说，它需要一个函数，而不是一个值(这与第 1 点有关——函数可以像变量一样传递)。函数的参数由比例的实现提供，对用户透明。您告诉比例尺一般如何插值，而不是如何插值特定值。当插值时间到来时，秤会知道使用适当的参数调用此函数。

4. 是的，interpolateHsl() 将在字符串中插入数字 - 我再次建议您引用 the documentation .

5. t 什么告诉插值函数转换已经进行了多远，即开始和结束之间的位置。它是 0 到 1 之间的数字，其中 0 表示“转换尚未开始”，1“转换已完成”。 the documentation 中也对此进行了描述。 .

6. 插值函数返回一个函数，给定一个告诉它转换进行了多远的t，该函数返回当前值。这称为闭包——一个匿名(未命名)函数，捕获它引用的变量的绑定(bind)。特别是，该闭包捕获两个字符串 a 和 b 之间的插值。也就是说，当(通过内部比例尺)调用 interpolateHsl() 时，会给出两个要插值的目标字符串。它没有被赋予t值。它返回一个函数，该函数采用t值并返回两个字符串之间插值的适当位置(“存在”在i 在闭包中捕获)。现在过渡已设置并开始。它生成 t 的值，并将其传递给之前创建的插值函数。

This page有一个关于闭包的简短教程，您可能会觉得有用。