0

这基本上是 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();

}
4

1 回答 1

0

感谢大家。

正如我认为它确实是一个 JavaScript 错误，当尝试绑定代码以使用来自服务器的实际数据生成图形时，ajax 调用获取数据有点晚。因此 JavaScript 解释器正在生成解析错误，因为它期望数据值存在，但 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();
}

})

于 2012-11-10T05:29:51.520 回答