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:
D3js - Obtenir une ligne graphique élaboré, à partir de “données JSON” d'entrée à l'aide de d3.json

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 :

  1. 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)
  2. 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.

OriginalL'auteur Nevin Madhukar K | 2014-03-11