d3js: Wie wählt man das n-te Element einer Gruppe?

Question

ich eine Gruppe mit 9 Elementen (Kreisen), wie:

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

Aber Wie das n-te Element wählen (dh: der 3. Kreis) der Gruppe groupOfCircles während die IDs oder Attribute der Kreise nicht kennen?

I wird später Schleife über alle Elemente über eine for-Schleife, und Farbe jeweils für eine Sekunde.

---

Hinweis: Ich hat versucht, Dinge wie:

circles[3].attr("fill","red") // not working 
    d3.select("#groupOfCircles:nth-child(3)").attr("fill","red") // not working 
    .. 

Answer 1

Der Wähler circle:nth-child(3) sein muss - die child bedeutet, dass das Element das n-te Kind ist, nicht das n-te Kind des Elements zu wählen (siehe here).

Sie auch nutzen könnten:

// 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"); 
 
    
 
    d3.select("circle:nth-child(3)").attr("fill","red"); // <== CSS selector (DOM) 
 
    d3.select(circles[0][4]).attr("fill","blue"); // <== D3 selector (node)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

Wenn Sie es in d3 Logik tun wollen, muss die anonyme Funktion immer einen Indexparameter neben den Daten:

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

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

Answer 3

Sie können Ihre Kreise Array verwenden Sie das Element des Attributs zu setzen:

d3.select(circles[3]).attr("fill","red"); 

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

 
var group = document.querySelector('#groupOfCircles'); 
 
var circleNodes = group.getElementsByTagName('circle'); 
 
d3.select(circleNodes[3]).attr("fill", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 4

Hier ist eine weitere Option durch eine Funktion als Selektor.

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

Wenn der Selektor eine Funktion ist es, das Datum (D) und der Iterator (i) als Parameter erhält. Es gibt dann entweder das Objekt (this) zurück, wenn ausgewählt, oder null, falls nicht ausgewählt.

Answer 5

d3 v4 unterstützt nun Auswahl .nodes() verwendet eine Anordnung von alle Elemente dieser Auswahl zurückzukehren. Dann können wir die Attribute n te Element von d3.select ändern (Auswahl .nodes() [n]). Attr (etwas)

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

 
circleElements = circles.nodes(); // <== Get all circle elements 
 
d3.select(circleElements[6]).attr("fill","red");

<script src="https://d3js.org/d3.v4.min.js"></script>