d3.js & json - código de muestra simple?

Question

Hay algunos ejemplos para obtener datos del archivo json externo en d3.js. Pero estas muestras no muestran el json, así que realmente quiero ver cómo funciona.

que tienen este archivo JSON test.json, y parece que

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

y quiero hacer un diagrama de dispersión con estos datos.

En el script d3.js. Agregué hasta ahora.

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

Si utilizo este conjunto de datos:

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

añadí esto y trabaja muy bien.

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

Me pregunto cómo debería cambiar esta parte que llama datos, si utilizo un archivo json externo. ¡Realmente apreciaré que alguien me pueda enseñar esto! Muchas gracias.

Answer 1

intentar algo como esto

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

donde data.js o data.json o lo que quieras llamarlo siempre que tiene un contenido js está su archivo JSON. También intente leer: https://github.com/mbostock/d3/wiki/Requests. Todo el código que utiliza los datos json se llamará desde la función de devolución de llamada json.

Answer 2

También puede usar Jquery JSON calls si está más familiarizado con ellos. O incluso se puede utilizar sólo una etiqueta de script que hace referencia a un ser variable asignada a JSON, así:

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

donde nosotros-pres.json comienza así:

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

Mientras usted obtener el JSON en una variable (colección), d3 en realidad no le importa cómo lo hace. Una vez que está allí, simplemente asigne usando la llamada d3 .data(dataset).