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

plotly js responsive

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.

Tengo este json file test.json, y parece

[
    {"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 uso este conjunto de datos:

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

Añadí esto y funciona 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 uso un archivo json externo. ¡Realmente apreciaré que alguien me pueda enseñar esto! Muchas gracias.

Answer 1

Pruebe algo como esto

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

donde data.js o data.json o lo que sea que quieras llamar, siempre que tenga contenido js es tu 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 las llamadas Jquery JSON si está más familiarizado con ellas. O simplemente puede usar una etiqueta de script que haga referencia a una variable que se le asigna a JSON, de la siguiente manera:

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

donde us-pres.json comienza así:

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

Siempre que obtenga el JSON en una variable (colección), d3 realmente no le importa cómo lo hace. Una vez que está allí, simplemente asignes usando la llamada d3 .data(dataset) .