D3 JS Fの意味が無名関数に渡されましたか？

Question

私はD3を学びたいと思っています。私は匿名の機能を理解するのに苦労しています。

以下の例では、関数（f）の最後に変数fを持つ変数 "interpolate"を返します（ "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))); 
    }; 
} 

1. 我々はattrTweenに閉鎖機能pathTweenを渡しています。フードの下でd3は、あなたの選択のすべての要素に対してpathTweenを呼び出します（あなたのケースでは、ただ1つのpathです）。
2. d3は、関数を返すために関数attrTweenに渡されることを期待しています。これはパラメータf（ほとんどd3の例では変数tを使用します）をとる無名関数です。
3. 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（と他の多くのプログラミング言語も）で非常に一般的です。
4. 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

関数で変数を渡すことができます！この行の

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

https://en.wikipedia.org/wiki/First-class_functionは、D3はあなたのための新しい関数を作成し、それがその後、準備ができinterpolateこれは、その後できる機能を返す

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

後の時点で実行される変数に代入されますD3によって呼び出されます。 D3がこの関数を呼び出すと、補間関数が入力として使用できるfの値が渡されます。 fを削除すると、代わりに値undefinedが関数に渡されます。