Dessin sur Plusieurs Lignes D3.js
Jusqu'à maintenant, j'ai été à l'aide de boucles d'ajouter des éléments de ligne pour un D3 visualisation, mais cela ne semble pas dans l'esprit de l'API.
Disons que j'ai des données,
var data = {time: 1, value: 2, value2: 5, value3: 3,value4: 2},
{time: 2, value: 4, value2: 9, value3: 2,value4: 4},
{time: 3, value: 8, value2:12, value3: 2,value4:15}]);
J'aimerais quatre lignes, avec le temps que le X pour tous les 4.
Je peux faire quelque chose comme ceci:
var l = d3.svg.line()
.x(function(d){return xScale(d[keys[0]]);})
.y(function(d,i){
return yScale(d[keys[1]]);})
.interpolate("basis");
var l2 = d3.svg.line()
.x(function(d){return xScale(d[keys[0]]);})
.y(function(d,i){
return yScale(d[keys[2]]);})
.interpolate("basis");
var l3 = d3.svg.line()
.x(function(d){return xScale(d[keys[0]]);})
.y(function(d,i){
return yScale(d[keys[3]]);})
.interpolate("basis");
var l4 = d3.svg.line()
.x(function(d){return xScale(d[keys[0]]);})
.y(function(d,i){
return yScale(d[keys[4]]);})
.interpolate("basis");
Et puis les ajouter un par un (ou par une boucle).
var line1 = group.selectAll("path.path1")
.attr("d",l(data));
var line2 = group.selectAll("path.path2")
.attr("d",l2(data));
var line3 = group.selectAll("path.path3")
.attr("d",l3(data));
var line4 = group.selectAll("path.path4")
.attr("d",l4(data));
Est-il une meilleure façon plus générale de l'ajout de ces chemins?
Vous devez vous connecter pour publier un commentaire.
Oui. Je souhaite tout d'abord restructurer vos données pour en faciliter l'itération, comme ceci:
Maintenant, vous avez juste besoin d'un seul génériques ligne:
Et, ensuite, vous pouvez ajouter tous les éléments de chemin d'accès d'un seul coup:
Si vous voulez faire de la structure de données de format plus petit, vous pouvez aussi extraire la fois dans un tableau séparé, et ensuite utiliser un tableau 2D pour les valeurs. Qui ressemblerait à ceci:
Depuis la matrice n'inclut pas la valeur du temps, vous avez besoin de chercher à partir de la x-accesseur de la ligne de générateur. D'autre part, l'axe de l'accesseur est simplifié puisque vous pouvez passer la matrice de la valeur directement à l'axe de l'échelle:
Créer les éléments reste le même:
x
ety
reportez-vous à la balance, qui, il faut définir avant de l'utiliser.group.selectAll
vient, je ne vois pas l'objet de groupe défini.