d3.jsでjsonファイルをインポートする

私は本当にd3.jsが新しく、d3.jsのjsonデータから折れ線グラフを作成しています。コードは、jsonデータがhtmlファイルの内部にあるときにうまく動作しますが、htmlからデータを取り出し、jsonファイルとして参照したいとします。サンプルのindex.htmlは次のようになります。私は、JSONデータを引き出し、実際のJSONデータがMB単位であるとのindex.htmlでそれを参照したいd3.jsでjsonファイルをインポートする

<!DOCTYPE html> 
<html lang="en"> 

<body> 
      <svg id="visualisation" width="1000" height="500"></svg> 
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
      <script> 
       function InitChart() { 
        var data = [{ 
         "sale": "202", 
         "year": "2000" 
        }, { 
         "sale": "215", 
         "year": "2002" 
        }, { 
         "sale": "179", 
         "year": "2004" 
        }, { 
         "sale": "199", 
         "year": "2006" 
        }, { 
         "sale": "134", 
         "year": "2008" 
        }, { 
         "sale": "176", 
         "year": "2010" 
        }]; 


        var vis = d3.select("#visualisation"), 
         WIDTH = 1000, 
         HEIGHT = 500, 
         MARGINS = { 
          top: 20, 
          right: 20, 
          bottom: 20, 
          left: 50 
         }, 
         xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([2000, 2010]), 
         yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([134, 215]), 
         xAxis = d3.svg.axis() 
         .scale(xScale), 
         yAxis = d3.svg.axis() 
         .scale(yScale) 
         .orient("left"); 

        vis.append("svg:g") 
         .attr("class", "x axis") 
         .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
         .call(xAxis); 
        vis.append("svg:g") 
         .attr("class", "y axis") 
         .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
         .call(yAxis); 
        var lineGen = d3.svg.line() 
         .x(function(d) { 
          return xScale(d.year); 
         }) 
         .y(function(d) { 
          return yScale(d.sale); 
         }) 
         .interpolate("basis"); 
        vis.append('svg:path') 
         .attr('d', lineGen(data)) 
         .attr('stroke', 'green') 
         .attr('stroke-width', 2) 
         .attr('fill', 'none'); 
       } 
       InitChart(); 
      </script> 
</body> 

</html>

。だから、私は、データを保存し、HTMLとJSONファイルの両方が同じディレクトリにあると

var data = d3.json("linedata.json");

としてInitChart（）関数の中にそれを言及しました。ブラウザー（firefox）でindex.htmlを開くと空白のページが表示されます。何が原因なのですか？

出典

2016-04-24 Shweta

プレスF12：ここ

はドキュメントです。コンソールに表示されるエラーは何ですか？ –

問題：

変数にd3.jsonを使用します。 d3.jsonは何も返しません（実際には、要求に関連付けられたオブジェクトを返します。このオブジェクトはファイルコンテンツ自体とは関係ありません）。

ソリューション：

代わりd3.json(url[, callback])を使用します。

指示：

D3は、JSONファイルをロードする方法を提供します。あなたはこれを行う必要があるでしょう：

d3.json("linedata.json", function(data){ 
    function initChart(){ 
     //all your code for initChart here 
    }; 
    initChart(); 
});

この方法では、JSONファイル内のデータは、パラメータdataに関連していると、コールバック関数内で使用することができます。 https://github.com/mbostock/d3/wiki/Requests#d3_json

出典

2016-04-24 03:14:06

オハイオ州完璧な、それは働いて、今私はd3.jsonがどのように動作するかについてより明確です。どうもありがとう。 – Shweta

d3.jsでjsonファイルをインポートする

答えて

関連する問題