web-dev-qa-db-fra.com

d3 js - chargement de json sans http get

J'apprends d3. Il y a certaines façons de charger les données dans d3 js. Mais tous semblent faire un HTTP GET. Dans mon scénario, j'ai déjà les données JSON dans une chaîne. Comment puis-je utiliser cette chaîne au lieu de faire une autre requête http? J'ai essayé de chercher de la documentation à ce sujet mais je n'en ai trouvé aucun.

Cela marche:

d3.json("/path/flare.json", function(json) {
    //rendering logic here
}

Maintenant, si j'ai:

//assume this json comes from a server (on SAME DOMAIN)
var myjson = '{"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "MergeEdge", "size": 10 }]}]}]}';

Comment utiliser déjà 'myjson' dans D3 et éviter un appel asynchrone au serveur? Merci.

javascriptjsond3.jsbubble-chart
62
Ravi

Remplacez simplement d3.json appeler avec

json = JSON.parse( myjson );

C'EST À DIRE:

var myjson = '{"name": "flare","children": [{"name": "analytics","children": [{"name": "cluster","children": [{"name": "MergeEdge", "size": 10 }]}]}]}';

// d3.json("/path/flare.json", function(json) { #delete this line

    json = JSON.parse( myjson ); //add this line

    //rendering logic here

//} #delete this line

MISE À JOUR 09/201

Le code original a changé. Donc varname json devrait être root:

// d3.json("flare.json", function(error, root) { #delete this line

    root = JSON.parse( myjson ); //add this line

    //rendering logic here

//} #delete this line
81
Luca Rainone

Selon cet exemple:

http://phrogz.net/JS/d3-playground/#StockPrice_HTML

Ici, ils stockent les données du graphique dans la variable $ data et les définissent via la fonction .data ($ data).

J'appliquerais cette méthode à tout graphique que vous utilisez.

2
dardo

La réponse de chumkiu a bien fonctionné pour moi, mais elle nécessitait quelques ajustements: dans la dernière version du diagramme à bulles d3, vous devez définir root plutôt que json, comme dans

 root = JSON.parse( myjson );

Alternativement, vous pouvez bien sûr remplacer "root" par "json" dans le reste du code. :-)

Pour tous ceux qui entendent cette réponse avec des questions sur les arbres de liens de nœuds d3 qui utilisent des ensembles de données locaux, cette réponse a fonctionné à merveille pour moi - un grand merci aux contributeurs sur cette page.

2
John Sharp