0

これは基本的にjavascriptの問題であり、Ajaxでデータを取得して配列に入れようとしていますが、配列をコンソールに記録すると、解析エラーが発生します。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 に答える