d3.js - d3js : How to select nth element of a group?

ID : 274514

viewed : 39

Tags : d3.jsd3.js





Top 5 Answer for d3.js - d3js : How to select nth element of a group?

vote vote

91

The selector needs to be circle:nth-child(3) -- the child means that the element is the nth child, not to select the nth child of the element (see here).

You could also use:

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

vote vote

85

d3 v4 now supports using selection.nodes() to return an array of all elements of this selection. Then, we can change the attributes of nth element by d3.select(selection.nodes()[n]).attr(something)

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

vote vote

80

You can also use your circles array to set the element's attribute:

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>

vote vote

61

If you want to do it in d3 logic, the anonymous function always has an index parameter aside the data:

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

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

vote vote

59

Here is another option by using a function as the selector.

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

If the selector is a function it gets the datum (d) and the iterator (i) as parameter. It then returns either the object (this) if selected or null if not selected.

Top 3 video Explaining d3.js - d3js : How to select nth element of a group?







Related QUESTION?