Question

我正在努力学习D3并且我很难理解匿名函数。

在下面的例子中，底部有函数（f）并且它返回带有参数f的变量“interpolate”（我认为它本身是akward，因为“interpolate”不是函数，而是变量）。

但是F的含义是什么？我没有看到它在“插值”功能中的使用方式和位置。如果我删除F并且只是传递（），我的动画会中断。

谢谢！：）

svg.append('path')
        .attr('class', 'line')
        .attr('d', line(lineData))
        .transition()
        .duration(3000)
        .attrTween('d', pathTween);

    function pathTween() {
        var interpolate = d3.scale.quantile()
                .domain([0,1])
                .range(d3.range(0, 7));
        return function(f) {
            return line(lineData.slice(0, interpolate(f)));
        };
    }

Answer 1

让我们打破这个：

....
.attrTween('d', pathTween);

function pathTween() {
    var interpolate = d3.scale.quantile()
            .domain([0,1])
            .range(d3.range(0, 7));
    return function(f) {
        return line(lineData.slice(0, interpolate(f)));
    };
}

我们正在将闭包函数pathTween传递给attrTween。引擎盖d3将为您选择中的每个元素调用pathTween（在您的情况下，它只是一个path）。
d3期望传递给attrTween的函数返回一个函数。这是带有参数f的匿名函数（大多数d3示例将使用变量t，更多内容将在一秒内使用变量{。li>
pathTween函数是一个闭包，因为它创建内部变量 interpolate并关闭它，以便它在内部返回函数中可用。你说it returns the variable "interpolate" with the parameter f (which i think is itself awkward, since "interpolate" is not a function but a variable)。这不是真的;首先，我们根本不返回interpolate（但它在闭包中可用），其次，它是一个存储在变量中的函数。将函数存储在变量中在JavaScript（以及许多其他编程语言）中非常常见。

现在d3具有内部的anon函数，它将为动画的每个刻度调用它（通常每16ms）。当它调用它时，它将通过f。什么是f？这是一个计时器（为什么它通常称为t）。它将包含一个从0到1的值，表示它在转换中的位置（0表示开始，1表示结束）。然后将此变量传递给函数 interpolate，该函数恰好在0到1之间（参见domain[0,1]）。

检查出来：

var interpolate = d3.scale.quantile() .domain([0,1]) .range(d3.range(0, 7)); console.log(typeof(interpolate)); console.log(interpolate(0)); console.log(interpolate(0.25)); console.log(interpolate(0.5)); console.log(interpolate(1));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

在javascript中，函数可以在变量中传递！ https://en.wikipedia.org/wiki/First-class_function

var interpolate = d3.scale.quantile()
                .domain([0,1])
                .range(d3.range(0, 7));

在这一行中，D3为您创建了一个新函数，然后将其分配给变量interpolate，准备稍后执行

return function(f) {
            return line(lineData.slice(0, interpolate(f)));
        };

然后返回一个可由D3调用的函数。当D3调用此函数时，它会传入f的值，插值函数可以将其用作输入。删除f意味着将值undefined传递给函数。

D3 JS什么是传递给匿名函数的F的含义？

2 个答案: