D3js - Obtenir une ligne graphique élaboré, à partir de “données JSON” d'entrée à l'aide de d3.json
J'ai récemment commencé à étudier D3.js et suis tombé sur quelques questions..
Voici ce que j'ai essayé jusqu'à présent :
Voici mon JS :
d3.json("../js/sample2.json", function(data) {
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
.attr("border", "black")
var group = canvas.append("g")
.attr("transform", "translate(100,10)")
var line = d3.svg.line()
.x(function(d, i) {
return data[0].position[i];
})
.y(function(d, i) {
return data[1].position[i];
});
var line1 = d3.svg.line()
.x(function(d, i) {
return data[2].position[i];
})
.y(function(d, i) {
return data[3].position[i];
});
var j = 0;
group.selectAll("path")
.data(data).enter()
.append("path")
// Have to provide where exaclty the line array is ! (line(array))
.attr("d", line(data[j].position))
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", 3);
var group2 = group.append("g")
.attr("transform", "translate(100,10)")
group2.selectAll("path")
.data(data).enter()
.append("path")
// Have to provide where exaclty the line array is ! (line(array))
.attr("d", line1(data[j].position))
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 3);
});
Voici mon fichier JSON:
[ {"name": "x1",
"position":[40,60,80,100,200]
},
{"name": "y1",
"position":[70,190,220,160,240]},
{"name": "x2",
"position":[40,60,80,100,200]
},
{"name": "y2",
"position":[20,90,20,60,40]}
]
Je veux la ligne à afficher à partir des données extraites de la fichier JSON.
J'ai effectivement eu la sortie,
C'est ma sortie de courant que je reçois:
Mais le problème est ,je veux que ce soit plus dynamique.
Comme par exemple si il n'y a plus de données dans le JSON.
Le JSON pourrait aller de
x1,y1 à xn,yn...(Similaire au format JSON ci-dessus)
[ {"name": "x1",
"position":[40,60,80,100,200]
},
{"name": "y1",
"position":[70,190,220,160,240]
},
{"name": "x2",
"position":[40,60,80,100,200]
},
{"name": "y2",
"position":[20,90,20,60,40]}
.
.
.
.
{"name": "xn",
"position":[40,60,80,100,200]
},
{"name": "yn",
"position":[20,90,20,60,40]}]
Donc mes questions liées sont les suivantes :
- Comment cela peut-il être fait dynamique(c'est à dire: quelle que soit la quantité de données dans le JSON,il devrait réfléchir sur le graphique avec les graphiques)
- Est le format de données au format JSON qui est entré à la D3js à l'aide de D3.json va être un problème? (Ou ce qui est exactement le format requis pour la D3.json et est-elle stricte?)
Pas entièrement sûr de ce que vous cherchez, mais cet exemple peut aider.
J'ai vérifié que le plus tôt.. Mais si vous avez été en utilisant d3js,seriez-vous d'utiliser JSON ou tsv format des données d'entrée?
N'a pas vraiment d'importance, ce qui est plus facile pour vous de produire, je suppose.
J'ai vérifié que le plus tôt.. Mais si vous avez été en utilisant d3js,seriez-vous d'utiliser JSON ou tsv format des données d'entrée?
N'a pas vraiment d'importance, ce qui est plus facile pour vous de produire, je suppose.
OriginalL'auteur Nevin Madhukar K | 2014-03-11
Vous devez vous connecter pour publier un commentaire.
Laissez votre structure de données json comme ça
Code
C'est la bonne façon de créer un multi-ligne graphique. Quel que soit le format des données que vous obtenez de json, vous pouvez convertir vers le format désiré à l'aide de Javascript les fonctions de tableau. Vous pouvez également utiliser Underscore.js pour un traitement facile.
Il ya tellement de nombreuses démonstrations pour d3 multi-lignes graphiques.. s'il vous Plaît se référer à eux et essayer avec votre fichier json. Si vous avez encore face à certains problèmes, créer une DONC, la question qui spécifie le problème exact.
OriginalL'auteur Gilsha
laisser le fichier JSON comme ça
et obtenir la longueur de cette "ligne"
exécuter dans un forloop..
espère que cela va résoudre
OriginalL'auteur Nidhin S G