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插值是插值串 - 我认为这将需要说[“宋体12px的”，“宋体24px的”]，挖出的数字部分和内插在那，然后重新加入文本元素？那么在这种情况下，它会从hsl字符串中提取数字分量并插入这些分量？

现在（如果它还不够），它会变得非常混乱。

t是'增量' - 所以如果总插值时间是5000ms，并且我们有5个离散的范围，那么t = 1000ms？所以在连续的情况下，它只是非常小？ （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告诉它转换已经进行了多久，返回当前值。这称为关闭 - 一个匿名（未命名）函数，捕获它引用的变量的绑定。特别是，该闭包捕获了两个字符串a和b之间的插值。也就是说，当调用interpolateHsl()（通过内部比例）时，会给出两个目标字符串进行插值。它是而不是给出了t的值。它返回 a 函数需要一个t值，并返回两个字符串（在闭包中捕获的i内的“活”）之间的插值的适当位置。现在转换已经建立并开始。它会生成t的值，并将其传递给先前创建的插值函数。

This page有关于关闭的简要教程，您可能会发现有帮助。