删除警报后 JavaScript 不工作

Question

我使用 D3.js，从 csv 文件加载数据后，当我删除alert() 语句时，页面不会呈现。我不是 js 专家，我知道这与异步操作模式有关，但我不知道要更改什么。

当警报时(“AAAAAAAA”)；已删除，可以使用，我很欣赏这是定制的 问题，因此有关该主题的其他帖子不容易理解。

非常感谢

安迪

</style>
<div id='dashboard2' align="center"></div>
<div id='dashboard' align="center"></div>
<script src="/xxxxxxxx/templates/uber/js/d3.min.js"></script>

<script type="text/javascript">
var climate_csv = function()
{
    d3.csv("/xxxxxxxx/templates/uber/js/theclimate.csv", function(climate_statistics)
    {
        //prices is an array of json objects containing the data in from the csv
        console.log("climate_statistics:", climate_statistics)
        climate_data = climate_statistics.map(function(d)
        {
            //each d is one line of the csv file represented as a json object
            console.log("d", d)
            month = d.month;
            console.log("month:", d.month, month)
            low = +d.low;
            console.log("low:", d.low, low)
            high = +d.high;
            console.log("high:", d.high, high)
            rainfall = +d.rainfall;
            console.log("rainfall:", d.rainfall, rainfall)
            sunshine = +d.sunshine;
            console.log("sunshine:", d.sunshine, sunshine)
            nighttime = +d.nighttime;
            console.log("nighttime:", d.nighttime, nighttime);
          return {"Month": month, "cStats": {"low": low , "high": high} , "rainfall": rainfall , "sun":{"Sunshine": sunshine , "Nighttime": nighttime}}
       })
    })
}

</script>

<script type="text/javascript">

var climateStats2=[
 {TempRange:'Low',cStats:{low:0}}
];

var climateStats3=[
 {TempRange3:'High',cStats:{high:0}}
];

var climateStats4=[
 {TempRange4:'Rainfall',cStats:{rainfall:0}}
];

var climateStats5=[
 {TempRange4:'Rainfall',cStats5:{lower5:0, upper5:0}}
];

        climate_csv();

alert("AAAAAAAA");

        dashboard('#dashboard',climate_data,climateStats2,climateStats3,climateStats4,climateStats5);

Answer 1

当您调用仪表板时，您的数据似乎尚未完全加载。它与警报配合使用，因为当警报打开时，您的脚本会暂停。另一件事是，您在这里使用全局变量。让我们使用回调来避免这种情况。

D3 的 csv 函数使用回调并在数据准备好时调用它。

d3.csv("/xxxxxxxx/templates/uber/js/theclimate.csv", function(climate_statistics) {
  /* ... */
});

您现在可以在回调中调用仪表板函数，或者向函数添加回调。让我们在这里执行后者:

var climate_csv = function( callback ) {
  d3.csv(
    "/xxxxxxxx/templates/uber/js/theclimate.csv",
    function( climate_statistics ) {

    var climate_data = climate_statistics.map(function( d ) {
      month = d.month;
      low = +d.low;
      high = +d.high;
      rainfall = +d.rainfall;
      sunshine = +d.sunshine;
      nighttime = +d.nighttime;
      return {
        "Month": month,
        "cStats": {
          "low": low,
          "high": high
        },
        "rainfall": rainfall,
        "sun": {
          "Sunshine": sunshine,
          "Nighttime": nighttime
        }
      };
    });

    // we are done with mapping our data
    // let's call the callback with the data
    callback(climate_data);
  });
};

/* ... */

climate_csv(function( climate_data ) {
  dashboard('#dashboard', climate_data, climateStats2, climateStats3,
    climateStats4, climateStats5);
});