d3js : Comment choisir n-ième élément d'un groupe?
J'ai créer un groupe avec 9 éléments (les cercles) tels que:
//JS
var data=[ 1,2,3,4,5,6,7,8,9 ];
var svg = d3.select("body").append("svg");
var circles = svg.append("g").attr("id", "groupOfCircles")
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d){ return d*20;})
.attr("cy", function(d){ return d*10;})
.attr("r" , function(d){ return d;})
.attr("fill","green");
//xml
<svg>
<g id="groupOfCircles">
<circle cx="20" cy="10" r="1" fill="green"></circle>
<circle cx="40" cy="20" r="2" fill="green"></circle>
<circle cx="60" cy="30" r="3" fill="green"></circle>
<circle cx="80" cy="40" r="4" fill="green"></circle>
<circle cx="100" cy="50" r="5" fill="green"></circle>
<circle cx="120" cy="60" r="6" fill="green"></circle>
<circle cx="140" cy="70" r="7" fill="green"></circle>
<circle cx="160" cy="80" r="8" fill="green"></circle>
<circle cx="180" cy="90" r="9" fill="green"></circle>
</g>
</svg>
Mais Comment sélectionner le n-ième élément (j'.e : le 3e cercle) du groupe groupOfCircles
tout en ne sachant pas les cercles' id ou des valeurs d'attributs ?
Je vais plus tard en boucle sur tous les éléments via une boucle for, et de la couleur de chaque pour une seconde.
Note: j'ai essayé des choses comme :
circles[3].attr("fill","red") //not working
d3.select("#groupOfCircles:nth-child(3)").attr("fill","red") //not working
..
OriginalL'auteur Hugolpz | 2015-03-26
Vous devez vous connecter pour publier un commentaire.
Si vous voulez le faire en d3 logique, la fonction anonyme a toujours un paramètre index de côté les données:
http://jsfiddle.net/risto/os5fj9m6/
La couleur est définie qu'une seule fois, lorsque les cercles sont dessinés. Vous n'avez certainement pas avoir à resélectionner tout. alors que l'original de votre approche ne un resélectionner.
J'ai fait 1. tracer le cercle en vert ; 2. faire une mise à jour de boucle pour changer la couleur de la cible, cercle pendant 1 seconde. Si je réutiliser votre
return i===3?"red":"green"
à l'intérieur de ma boucle for, à chaque cycle, je vais redessiner tous les milieux, et à la couleur rouge de la un respect de la condition. (Si je comprends d3)OriginalL'auteur Imperative
Ici est une autre option à l'aide d'une fonction que le sélecteur.
Si le sélecteur est une fonction qu'il reçoit la donnée (d) et l'itérateur (i) en tant que paramètre. Il renvoie ensuite l'objet (ce) si cette option est sélectionnée, ou null si pas sélectionné.
OriginalL'auteur A.Schulz