2015-09-27 29 views
0

我使用D3.js並且從csv文件加載數據時,當我刪除alert()語句時,頁面不呈現。我不是js專家,我知道這是與異步操作模式有關的,但我不知道要改變什麼。當警報被刪除時Javascript不工作

當警報(「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); 

回答

0

將當您刪除警報的成功回調裏面,這將使招不工作的功能。 .csv工作異步,所以當你把警報,請求完成在後臺,當你刪除它沒有「等待時間」添加(因爲它應該是),這就是爲什麼它不工作。

不使用d3.js,但醫生可以幫助: https://github.com/mbostock/d3/wiki/CSV

d3.csv("path/to/file.csv") 
    .row(function(d) { return {key: d.key, value: +d.value}; }) 
    .get(function(error, rows) { console.log(rows); }); 

希望它能幫助。

1

似乎在您調用儀表板時,數據未完全加載。它適用於alert,因爲在警報打開時,腳本暫停。另一件事是,你在這裏使用全局變量。讓我們避免使用回調。

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); 
});