Importar el archivo json local usando d3.json no funciona

Question

Intento importar un archivo .json local usando d3.json() .

El archivo filename.json se almacena en la misma carpeta que mi archivo html.

Sin embargo, el parámetro (json) es nulo.

d3.json("filename.json", function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;});
    . . . 
}

Mi código es básicamente el mismo que en este ejemplo d3.js

Answer 1

Además de las respuestas anteriores, es más sencillo utilizar un servidor HTTP proporcionado por la mayoría de las máquinas Linux / Mac (solo con tener instalado Python).

Ejecute el siguiente comando en la raíz de su proyecto

python -m SimpleHTTPServer

Luego, en lugar de acceder al file://.....index.html abra su navegador en http://localhost:8080 o el puerto provisto al ejecutar el servidor. De esta forma, el navegador buscará todos los archivos en su proyecto sin ser bloqueados.

Answer 2

He usado esto

d3.json("graph.json", function(error, xyz) {
    if (error) throw error;
    // the rest of my d3 graph code here
    }

para que pueda consultar su archivo json utilizando la variable xyz y el gráfico es el nombre de mi archivo json local

Answer 3

No puede leer fácilmente archivos locales, al menos no en Chrome, y posiblemente tampoco en otros navegadores.

La solución más simple es simplemente incluir sus datos JSON en su archivo de script y luego simplemente deshacerse de su llamada d3.json y mantener el código en la devolución de llamada que le pasa.

Su código se vería así:

json = { ... };

root = json;
root.x0 = h / 2;
root.y0 = 0;
... 

Answer 4

Si está ejecutando en un navegador, no puede cargar archivos locales .

Pero es bastante fácil ejecutar un servidor de desarrollo, en la línea de comandos, simplemente cd en el directorio con sus archivos, luego:

python -m SimpleHTTPServer

(o python -m http.server utilizando python 3)

Ahora en su navegador, vaya a localhost:3000 (o :8000 o lo que sea que se muestre en la línea de comandos).

Lo siguiente solía funcionar en versiones anteriores de d3:

var json = {"my": "json"};
d3.json(json, function(json) {
    root = json;
    root.x0 = h / 2;
    root.y0 = 0;
});

Answer 5

http://bl.ocks.org/eyaler/10586116 Consulte este código, esto es leer un archivo y crear un gráfico. También tuve el mismo problema, pero luego descubrí que el problema estaba en el archivo json que estaba usando (una coma extra). Si obtiene nulo aquí, intente imprimir el error que está recibiendo, como puede ser.

d3.json("filename.json", function(error, graph) {
  alert(error)
})

Esto está funcionando en Firefox, en Chrome de alguna manera no está imprimiendo el error.