스크립트가 루프와 동시에 실행되고 있지 않습니다.

Question

현재 for 루프가 있고 그 안에 스크립트를 실행 중입니다.

루프가 실행될 때마다 그리고 함수가 실행될 때마다 기록됩니다.

이

내 코드의 샘플입니다

이 스크립트가 실행 루프에 3 번

스크립트 아래

<script> 
console.log ("LOOP"); 
var impressions = [<?= implode(",", $prod_impression_dots) ?>];        
var testdata = [ 
{ 
    "key" : "Impressions" , 
    "type": "line", 
    "values" : impressions, 
    "yAxis": 1 
}  
].map(function(series) { 
    series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } }); 
     return series; 
    }); 

nv.addGraph(function() { 
    console.log ("Add graph is called here"); 
    console.log (testdata); 
    var chart = nv.models.multiChart() 
       .margin({top: 30, right: 60, bottom: 50, left: 70}) 
       .x(function(d,i) { return i }) 
       .color(d3.scale.category10().range()); 

chart.xAxis 
    .tickFormat(function(d) { 
     var dx = testdata[0].values[d] && testdata[0].values[d].x || 0; 
     if (typeof (dx) == undefined || d > 1000) { 
      dx = new Date (d); 
     } 
     else { 
      dx = new Date (dx); 
     } 
     return dx ? d3.time.format('%x')(dx) : ''; 
     }); 

chart.yAxis1 
    .tickFormat(d3.format(',.1f')); 

chart.yAxis2 
    .tickFormat(d3.format(',.4f')); 

d3.select('#chart<?= $counter ?> svg') 
.datum(testdata) 
.transition().duration(500).call(chart); 
nv.utils.windowResize(chart.update); 
return chart; 
}); 
</script> 

이를 실행 한 후 div 태그

<div id='chart<?= $counter ?>' style="width:1150px;height:300px;font-size:11px;margin-top:5px"> 
      <svg> </svg> 
      </div> 

입니다 . 콘솔 로그의 출력은 다음과 같습니다.

LOOP 
LOOP 
LOOP 
Add graph is called here 
[Object, Object, Object, Object] 
Add graph is called here 
[Object, Object, Object, Object] 
Add graph is called here 
[Object, Object, Object, Object] 
total 199 nv.d3.js:40 

루프가 반복 된 직후에 함수가 실행되지 않는 이유가 궁금합니다. 이렇게하면 모든 그래프가 동일한 데이터를 갖게됩니다.

감사합니다.

Answer 1

확실히 addGraph complete 함수는 비동기 적으로 호출됩니다. 이렇게하면 해결할 수 있습니다.

<script> 
console.log ("LOOP"); 
var impressions = [<?= implode(",", $prod_impression_dots) ?>];        
var testdata = [ 
{ 
    "key" : "Impressions" , 
    "type": "line", 
    "values" : impressions, 
    "yAxis": 1 
}  
].map(function(series) { 
    series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } }); 
     return series; 
    }); 

nv.addGraph((function (testdata) { 
    return function() { 
    console.log ("Add graph is called here"); 
    console.log (testdata); 
    var chart = nv.models.multiChart() 
       .margin({top: 30, right: 60, bottom: 50, left: 70}) 
       .x(function(d,i) { return i }) 
       .color(d3.scale.category10().range()); 

chart.xAxis 
    .tickFormat(function(d) { 
     var dx = testdata[0].values[d] && testdata[0].values[d].x || 0; 
     if (typeof (dx) == undefined || d > 1000) { 
      dx = new Date (d); 
     } 
     else { 
      dx = new Date (dx); 
     } 
     return dx ? d3.time.format('%x')(dx) : ''; 
     }); 

chart.yAxis1 
    .tickFormat(d3.format(',.1f')); 

chart.yAxis2 
    .tickFormat(d3.format(',.4f')); 

d3.select('#chart<?= $counter ?> svg') 
.datum(testdata) 
.transition().duration(500).call(chart); 
nv.utils.windowResize(chart.update); 
return chart; 
} 
})(testdata)); 
</script>