d3.line関数のループの場合

Question

d3.line関数を使用してforループ内で異常な動作が発生しました。 これは、ループは次のようになります。

for (zzz = 0; zzz < 3; zzz++) { 
    lines = d3.line() 
     .x(function(d,i) { console.log(zzz); x([1,2,3]) }) 
     .y(function(d,i) { console.log(zzz); y([1,2,3]) }); 
} 

通常、私はこれのconsole.logではなく、私は私がしようとして日々を過ごし

3 
3 
3 

を取得しています

0 
1 
2 

のように見えることを期待します理由を理解する...だれでも助けることができますか？

Here is a jfiddle。それはコンソール出力を生成するために最小限必要です。

Answer 1

このブロックは：

for (zzz = 0; zzz < 3; zzz++) { 
    lines = d3.line() 
     .x(function(d,i) { console.log(zzz); x([1,2,3]) }) 
     .y(function(d,i) { console.log(zzz); y([1,2,3]) }); 
} 

何かを記録しません。このデモをチェックしてください：

for (zzz = 0; zzz < 3; zzz++) { 
 
    console.log("Outside d3.line, zzz is " + zzz); 
 
    lines = d3.line() 
 
     .x(function(d,i){console.log("Inside d3.line nothing is printed!");x([1,2,3]) }) 
 
     .y(function(d,i){console.log("Inside d3.line nothing is printed!");y([1,2,3]) }); 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script>

理由はd3.line()が呼び出されていないということである（したがって、および、コンソールには何も印刷されません）。 d3.line()は、実際にパスを追加するときにのみ呼び出されます（linesを使用）。そのとき、forループは終了し、zzzは3です（letを使用した場合は、代わりに2になります）。

また、3を3回取得するという事実はちょうど偶然であり、forループが0から2（3回繰り返す）という事実とは関係ありませんが、あなたのフィドルにlinesという3つの値を持つ配列：lines([1, 2, 3])。次のデモでは、機能ごとに一回だけzzzを印刷します：

var svg = d3.select("body"); 
 
var x = d3.scaleLinear().range([0, 100]); 
 
var y = d3.scaleLinear().range([100, 0]); 
 

 
for (zzz = 0; zzz < 3; zzz++) { 
 
    lines = d3.line() 
 
    .x(function(d,i) { console.log("first console.log: " + zzz); x([1,2,3]) }) 
 
    .y(function(d,i) { console.log("second console.log: " + zzz); y([1,2,3]) }); 
 
} 
 

 
svg.append("path").attr("d", lines([1]));

<script src="https://d3js.org/d3.v4.min.js"></script>

ので、一言で言えば、あなただけのforループ内linesを定義しています。