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.d3.js & json - código de muestra simple?
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.
esto fue útil para mí el 5 de junio de 2013 – laycat
@laycat: es posible renderizarlo localmente ... es decir, si no tengo un JSON en el servidor y solo en mi máquina local, ¿cómo lo hago? Ni siquiera puedo darte un violín ... porque tienes que subir tu json al servidor primero ... –
@MESSIAH Tal vez esté mal pero depende de tu marco. para mí estoy usando django, pude leer el json de un directorio localhost a django en views.py y pasarlo como contexto a la "plantilla" aka .html página – laycat