d3.js & json - codice di esempio semplice?

Question

Ci sono alcuni esempi per ottenere dati dal file json esterno in d3.js. Ma questi esempi non mostrano il json, quindi voglio davvero vedere come funziona.

devo questo file JSON test.json, e sembra che

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

e voglio fare un grafico a dispersione con questi dati.

Nello script d3.js. Ho aggiunto finora.

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"); 

Se io uso questo set di dati:

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

ho aggiunto questo e funziona benissimo.

Mi chiedo come dovrei cambiare questa parte che chiama i dati, se uso un file json esterno. Apprezzerò davvero qualcuno che possa insegnarmi questo! Grazie molto.

Answer 1

provare qualcosa di simile

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

dove data.js o data.json o qualsiasi altra cosa che si desidera chiamare il più a lungo in quanto ha un contenuto js è il file JSON. Prova anche a leggere: https://github.com/mbostock/d3/wiki/Requests. Tutto il codice che utilizza i dati JSON verrà chiamato dalla funzione di callback di JSON.

Answer 2

È anche possibile utilizzare Jquery JSON calls se si è più familiari con questi. Oppure si può utilizzare anche solo un tag script che fa riferimento a un essere variabile assegnata a JSON, in questo modo:

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

dove ci-pres.json inizia così:

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

Finché ottenere il JSON in una variabile (raccolta), a d3 non interessa davvero come lo si fa. Una volta lì, basta assegnarlo usando la chiamata d3 .data(dataset).