Javascript nvD3图表没有等待AJAX​​调用完成

Question

我正在尝试将jquery ajax调用中的一些数据加载到nvD3图表中。如果我不包含ajax调用，那么图表工作得很好，但如果我在调用ajax之后尝试加载数据，则根本不加载..

<script>
     angular.module('app',  ['onsen'])

        nv.addGraph(function() {
          var chart = nv.models.discreteBarChart()
              .x(function(d) { return d.label })    //Specify the data accessors.
              .y(function(d) { return d.value })
              .staggerLabels(true)    //Too many bars and not enough room? Try staggering labels.
              .tooltips(false)        //Don't show tooltips
              .showValues(true)       //...instead, show the bar value right on top of each bar.

              ;

          d3.select('#chart svg')
              .datum(exampleData())
              .call(chart);

          nv.utils.windowResize(chart.update);

          return chart;
        });

        //Each bar represents a single discrete quantity.
        function exampleData() {
            $.ajax({
                type: "GET", 
                url: "https://demo8162910.mockable.io/json",
                dataType: 'jsonp',
                jsonp: true,
                jsonpCallback: "myJsonMethod",
                error: function(){
                    console.log( 'Unable to load feed, Incorrect path or invalid feed' );
                },
                success: function(data){
                    console.log( 'feed done' );
                    return  [ 
                                {
                                  key: "Cumulative Return",
                                  values: [
                                    { 
                                      "label" : "A Label" ,
                                      "value" : -29.765957771107
                                    } , 
                                    { 
                                      "label" : "B Label" , 
                                      "value" : 0
                                    } , 
                                    { 
                                      "label" : "C Label" , 
                                      "value" : 32.807804682612
                                    } , 
                                    { 
                                      "label" : "D Label" , 
                                      "value" : 196.45946739256
                                    } , 
                                    { 
                                      "label" : "E Label" ,
                                      "value" : 0.19434030906893
                                    } , 
                                    { 
                                      "label" : "F Label" , 
                                      "value" : -98.079782601442
                                    } , 
                                    { 
                                      "label" : "G Label" , 
                                      "value" : -13.925743130903
                                    } , 
                                    { 
                                      "label" : "H Label" , 
                                      "value" : -5.1387322875705
                                    }
                                  ]
                                }
                              ]                 

                }});

        }

    </script>

Answer 1

我认为你需要把

d3.select('#chart svg')
          .datum(exampleData())
          .call(chart);

在success功能中，用数据本身替换exampleData()。