nvd3.js가 jquery에서 데이터를 가져 오지 않습니다.

Question

nvd3.js 라이브러리를 사용하여 jQuerys $.getJSON 함수 또는 d3.json 함수를 사용하여 웹 서비스에서 데이터를 가져온 stackedAreaChart을 만드는 데 문제가 있습니다. webservice에서 데이터를 가져 오는 중 차트에 데이터를 가져올 수 없습니다. 정적 데이터로 시도했지만이 작동하지만 $.getJSON 또는 d3.json을 사용할 때 truble이 시작됩니다.

내가 뭘 잘못하고 있니? 그리고이 일을하는 더 좋은 방법이 있습니까? (데이터 추세를 보여주기 위해) 그래픽을 만들기위한 더 좋은 프레임 워크가 있습니까? 캔트가 이것에 대한 좋은 자료를 찾았으니 어떤 도움을 주셔서 감사합니다! :)

<script> 
var chart; 
var data = [{ 
    "key": "HTTP 200", 
    "values": getData() 
}]; 
setupGraph(); 

    function setupGraph() { 

     nv.addGraph(function() { 

      chart = nv.models.stackedAreaChart() 
        .x(function(d) { return d[0] }) 
        .y(function(d) { return d[1]/100 }) 
        .color(d3.scale.category10().range()) 
        .clipEdge(false); 

      chart.xAxis 
       .tickFormat(function(d) { 
        return d3.time.format('%H:%M')(new Date(d)) 
       }); 

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

      d3.select('#chart1 svg') 
       .datum(data) 
       .transition().duration(500) 
       .call(chart); 

      nv.utils.windowResize(chart.update); 
      return chart; 
     }); 
    } 
function getData(){ 
    var arr = []; 
    d3.json('http://localhost:8080/api', function(inndata){ 
     for(var i in inndata){ 
      var dataarr = new Array(); 
      dataarr[0] = new Date(inndata[i].date); 
      dataarr[1] = inndata[i].count; 
      arr.push(dataarr); 
      //arr.push({x: new Date(inndata[i].date), y: inndata[i].count}); 
     } 

    return arr; 
} 
</script> 

The json string lookis like this: 
[{"date": "2013-01-07 09:01", "count": 2}, {"date": "2013-01-07 05:02", "count": 2}, }] 

Answer 1

자바 스크립트는 비동기 - 그래서 당신은 d3.json 방법에 대한 콜백 내에서()는 setupGraph를 제공해야합니다. 다음과 같이하십시오 :

var arr = []; 
d3.json('http://localhost:8080/api', function(inndata){ 
    for(var i in inndata){ 
     var dataarr = new Array(); 
     dataarr[0] = new Date(inndata[i].date); 
     dataarr[1] = inndata[i].count; 
     arr.push(dataarr); 
     //arr.push({x: new Date(inndata[i].date), y: inndata[i].count}); 
    } 
    var data = [{ 
     "key": "HTTP 200", 
     "values": arr 
    }]; 
    setupGraph(data) // Pass through data to setupGraph 
}