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");

d3js : Comment choisir n-ième élément d'un groupe?

//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

  1. 1

    Si vous voulez le faire en d3 logique, la fonction anonyme a toujours un paramètre index de côté les données:

    my_selection.attr("fill",function(d,i) {return i%3==0?"red":"green";});

    http://jsfiddle.net/risto/os5fj9m6/

    C'est la façon dont j'ai l'habitude d'aller, mais j'ai bien d'être un peu excessif pour redessiner toute la sélection lorsque vous avez réellement envie de changer un seul élément.
    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

  2. 0

    Ici est une autre option à l'aide d'une fonction que le sélecteur.

        circles.select(function (d,i) { return (i==3) ?  this : null;})
    .attr("fill", "red");

    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