JavaScript Ошибка Parsing

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

})