web-dev-qa-db-fra.com

Importer un fichier json local à l'aide de d3.json ne fonctionne pas

J'essaie d'importer un fichier .json local à l'aide de d3.json().

Le fichier filename.json est stocké dans le même dossier que mon fichier html.

Pourtant, le paramètre (json) est nul.

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

Mon code est fondamentalement le même que dans cet exemple d3.js

jsond3.js
32
Aleks G

Si vous utilisez un navigateur, vous ne pouvez pas charger de fichiers locaux .

Mais il est assez facile de lancer un serveur de dev, sur la ligne de commande, simplement cd dans le répertoire avec vos fichiers, puis:

python -m SimpleHTTPServer

(ou python -m http.server en utilisant python 3)

Maintenant, dans votre navigateur, allez à localhost:3000 (ou :8000 ou à ce que vous voyez sur la ligne de commande).

Ce qui suit fonctionnait dans les anciennes versions de d3:

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

http://bl.ocks.org/eyaler/10586116 Reportez-vous à ce code, il s'agit de la lecture d'un fichier et la création d'un graphique . J'ai également eu le même problème, mais plus tard, j'ai pensé que le problème était dans le fichier json que j’utilisais (une virgule supplémentaire). Si vous obtenez null ici, essayez d’imprimer l’erreur que vous obtenez, comme cela peut être.

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

Cela fonctionne dans Firefox, en chrome en quelque sorte sa pas imprimer l'erreur. 

8
Surendra Pratap

En ajoutant aux réponses précédentes, il est plus simple d'utiliser un serveur HTTP fourni par la plupart des machines Linux/Mac (simplement en installant python).

Exécutez la commande suivante à la racine de votre projet

python -m SimpleHTTPServer

Ensuite, au lieu d'accéder à file://.....index.html, ouvrez votre navigateur sur http://localhost:8080 ou le port fourni par l'exécution du serveur. De cette façon, le navigateur récupérera tous les fichiers de votre projet sans être bloqué.

6
bigsolom

Vous ne pouvez pas facilement lire les fichiers locaux, du moins pas dans Chrome, ni éventuellement dans d'autres navigateurs.

La solution de contournement la plus simple consiste à simplement inclure vos données JSON dans votre fichier de script, à vous débarrasser simplement de votre appel d3.json et à conserver le code dans le rappel que vous lui transmettez.

Votre code ressemblerait alors à ceci:

json = { ... };

root = json;
root.x0 = h / 2;
root.y0 = 0;
...
1
Kenny Evitt

Dans la version d3.v5, vous devriez le faire en tant que 

d3.json("file.json").then(function(data){ console.log(data)});

De même, avec CSV et autres formats de fichiers.

Vous pouvez trouver plus de détails à https://github.com/d3/d3/blob/master/CHANGES.md

1
Manas Bhardwaj

J'ai utilisé ceci

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

vous pouvez donc vous référer à votre fichier JSON en utilisant la variable xyz et graph est le nom de mon fichier json local

0
Aakanksha Choudhary