JavaScript解析錯誤

Question

這基本上是javascript問題我想通過Ajax獲取數據並將它們放入數組，但是當我在控制檯中記錄數組時，我得到Parse錯誤。我正在使用d3.js庫創建一個動態圖。但錯誤是我猜純粹是由於錯誤地應用了Javascript概念。

var n = 40, 
    random = function(){ 
    d3.json("/server/file/path", function(graphdata){// This is the way we perform ajax call in d3,js 
     return graphdata; 
    }); 
    }, 
    data = d3.range(n).map(random);// Here I am putting into the array n = 40 elements obtained in the ajax call. But I am getting Parse error NaN for number values. 



    //Afterwards I am just drawing the graph  
    var margin = {top: 10, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.linear() 
.domain([0, n - 1]) 
.range([0, width]); 

var y = d3.scale.linear() 
.domain([-1, 1]) 
.range([height, 0]); 

var line = d3.svg.line() 
.x(function(d, i) { return x(i); }) 
.y(function(d, i) { return y(d); }); 

var svg = d3.select("body").append("svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("defs").append("clipPath") 
.attr("id", "clip") 
.append("rect") 
.attr("width", width) 
.attr("height", height); 

svg.append("g") 
.attr("class", "x axis") 
.attr("transform", "translate(0," + height + ")") 
.call(d3.svg.axis().scale(x).orient("bottom")); 

svg.append("g") 
.attr("class", "y axis") 
.call(d3.svg.axis().scale(y).orient("left")); 

var path = svg.append("g") 
.attr("clip-path", "url(#clip)") 
.append("path") 
.data([data]) 
.attr("class", "line") 
.attr("d", line); 

tick(); 

function tick() { 

// push a new data point onto the back 
data.push(random()); 

// redraw the line, and slide it to the left 
path 
    .attr("d", line) 
    .attr("transform", null) 
    .transition() 
    .duration(500) 
    .ease("linear") 
    .attr("transform", "translate(" + x(-1) + ")") 
    .each("end", tick); 

// pop the old data point off the front 
data.shift(); 

} 

Answer 1

謝謝大家。

因爲我在想這確實是一個JavaScript錯誤，所以當嘗試綁定代碼以生成帶有來自服務器的實際數據的圖形時，ajax調用稍晚才獲取數據。所以JavaScript解釋器生成Parsing錯誤，因爲它預期數據值在那裏，但是ajax是異步的還不能完成數據檢索。此外，我還提出了一些可變參數來解決這個問題。

我的解決辦法是如下

$(function(){ 
// data is a global variable 
    data = $.ajax({ type:"GET", 
     url:"location/to/fetch/data", 
     }).responseText; 
    draw(); 

} 
    function draw(){ 

    var n = 40, 
    random = function(){ 
       var result = $.ajax({ 
       url : /to/fetch/live data/, 
       type:'GET' 
       }).rsponseText; 
       return result; 
      } 



//Afterwards I am just drawing the graph  
    var margin = {top: 10, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

    x = d3.scale.linear() 
.domain([0, n - 1]) 
.range([0, width]); 

y = d3.scale.linear() 
.domain([-1, 1]) 
.range([height, 0]); 

line = d3.svg.line() 
.x(function(d, i) { return x(i); }) 
.y(function(d, i) { return y(d); }); 

    svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    svg.append("defs").append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.svg.axis().scale(x).orient("bottom")); 

    svg.append("g") 
    .attr("class", "y axis") 
    .call(d3.svg.axis().scale(y).orient("left")); 

    path = svg.append("g") 
    .attr("clip-path", "url(#clip)") 
    .append("path") 
    .data([data]) 
    .attr("class", "line") 
    .attr("d", line); 

tick(); 
} 
function tick() { 

// push a new data point onto the back 
    data.push(random()); 

// redraw the line, and slide it to the left 
    path 
    .attr("d", line) 
    .attr("transform", null) 
    .transition() 
    .duration(500) 
    .ease("linear") 
    .attr("transform", "translate(" + x(-1) + ")") 
    .each("end", tick); 

    // pop the old data point off the front 
    data.shift(); 
} 

}）