d3.line 함수가있는 루프 For

d3.line 함수를 사용하여 for 루프 내에서 이상한 동작이 발생했습니다.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이

0 
1 
2

같이 기대 대신에 내가 시도 일 동안

3 
3 
3

점점 오전 : 이 같은 루프가 모습입니다 왜 그런지 알아 내려고. 누구든지 도와 줄 수 있니?

Here is a jfiddle. 콘솔 출력을 생성하는 데 필요한 최소한의 기능이 있습니다.

출처

2016-10-15 Arthur Tarasov

이 블록은 :

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을 세 번 받는다는 것은 우연의 일치입니다. for 루프가 0에서 2 (반복 횟수가 3 회)가된다는 사실과는 아무런 관련이 없습니다. 귀하의 피들에 lines 세 값을 가진 배열 : 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을 정의하고 있습니다.

출처

2016-10-15 02:11:59

d3.line 함수가있는 루프 For

답변

관련 문제