d3插值示例说明

Question

我能否确认我对以下代码中发生的事情的理解？

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

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

没有指定域，因为使用 .interpolate() 仅适用于 0 到 1 之间的域？还是因为在这种情况下 domain == range ？还是其他原因？

从 interpolate 函数调用 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 计算插值，然后将其转换为真正的 hsl 值，而不仅仅是通过 d3.hsl() 的字符串表示。

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

从广义上讲，我的理解是不完整的，因此对正在发生的事情进行更广泛的解释将非常有帮助。

Answer 1

1234563 .

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

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

3. 是的，interpolateHsl() 将插入字符串中的数字——我再次将您推荐给the documentation。

4. t 告诉插值函数过渡进行了多远，即它在开始和结束之间的位置。它是一个介于 0 和 1 之间的数字，其中 0 表示“转换尚未开始”，1 表示“转换完成”。 the documentation 中也对此进行了描述。

5. 插值函数返回一个函数，给定一个t，告诉它转换进行了多远，返回当前值。这称为 closure - 一个匿名（未命名）函数，它捕获它引用的变量的绑定。特别是，这个闭包捕获了两个字符串a 和b 之间的插值。也就是说，当调用interpolateHsl() 时（通过内部比例），它被赋予两个目标字符串以进行插值。 不是给定t 值。它返回一个函数，它采用t 值并返回两个字符串之间插值的适当位置（在关闭）。现在过渡已设置并开始。它为t 生成值，这些值被传递给之前创建的插值函数。

This page 有一个关于闭包的简短教程，可能对您有所帮助。