d3.js＆json - 簡単なサンプルコード？

Question

d3.jsの外部jsonファイルからデータを取得するいくつかの例があります。しかし、これらのサンプルにはjsonが表示されないので、実際にどのように動作するかを見たいと思っています。

私は、このJSONファイルtest.jsonを持っている、そしてそれは

[ 
    {"a":"-1.14","b":"4.14"}, 
    {"a":"-0.13","b":"1.38"}, 
    {"a":"-4.19","b":"1.43"}, 
    {"a":"-0.21","b":"3.34"} 
] 

のように見え、私は、これらのデータを散布図を作りたいです。

d3.jsスクリプトの場合。私はこれまでに追加しました。

var width = 400; 
var height = 400; 

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

var chart = d3.select("body").append("svg") 
    .attr("width", width+70) 
    .attr("height", height+70) 
    .attr("class", chart) 
    .append("g") 
     .attr("transform", "translate(30, 30)"); 


chart.selectAll("xline") 
    .data(x.ticks(11)) 
    .enter().append("line") 
     .attr("x1", x) 
     .attr("x2", x) 
     .attr("y1", 0) 
     .attr("y2", height) 
     .style("stroke", "#ccc"); 

chart.selectAll("yline") 
    .data(y.ticks(11)) 
    .enter().append("line") 
     .attr("y1", y) 
     .attr("y2", y) 
     .attr("x1", 0) 
     .attr("x2", width) 
    .style("stroke", "#ccc"); 

私は、このデータセットを使用する場合：

var dataset = [ [-1, -3], [2, 4], [3, -4], [-3, 1]]; 

を私はこれを追加し、それが正常に動作します。

chart.selectAll("scatter-dots") 
     .data(dataset) 
     .enter().append("circle") 
     .attr("cx", function (d) { return x(d[0]); }) 
     .attr("cy", function (d) { return y(d[1]); }) 
     .attr("r", 10) 
     .style("opacity", 0.6); 

私は外部のJSONファイルを使用している場合、私は、データを呼び出して、この部分を変更する方法を疑問に思って。私は本当に誰かが私にこれを教えることができます感謝します！どうもありがとう。

Answer 1

はdata.jsまたはdata.jsonまたはあなたがいる限り、それはjsのコンテンツは、あなたのJSONファイルでいるとして、それを呼び出すために好きなこの

d3.json("data.js", function(data) { 
alert(data.length) 
}); 

のようなものを試してみてください。また、読んでみてください：https://github.com/mbostock/d3/wiki/Requests。 jsonデータを使用するすべてのコードは、jsonコールバック関数から呼び出されます。

Answer 2

さらに詳しいことがある場合は、Jquery JSON callsを使用することもできます。 それともだけでもそうと同じように、JSONに割り当てられている変数を参照するスクリプトタグを使用することができます限り、あなたのように

var dataset = {"state":"US",... 

：私たち-pres.jsonはこのように始まる

<script src="us-pres.json" type="text/javascript"></script> 

JSONを変数（コレクション）に入れると、d3はどうやってそれを行うか気にしません。それが終わったら、d3 .data(dataset)コールを使用して割り当てます。