How can I choose: last-child in d3.js?

Question

I need to manipulate the text elements of the first and last tick of the axis to bring them closer to the center.

I am trying to select them, one at a time, with something like svg.select('.tick:last-child text') , but it does not work. Then I would apply .transform('translate(4,0)') ...

Am I doing something wrong? How can I achieve this?

Answer 1

One thing you can do is create custom sub-segments by adding methods to d3.selection.prototype . You can create a selection.first() method that selects the first item in the selection and a selection.last() method that selects the last item. For example:

 d3.selection.prototype.first = function() { return d3.select(this[0][0]); }; d3.selection.prototype.last = function() { var last = this.size() - 1; return d3.select(this[0][last]); }; 

This will allow you to do the following:

 var tickLabels = svg.selectAll('.tick text'); tickLabels.first() .attr('transform','translate(4,0)'); tickLabels.last() .attr('transform','translate(-4,0)'); 

---

Of course, you need to make sure that you have only one axis, if you do. Otherwise, specify the axis in your initial selection:

 var tickLabels = svg.selectAll('.axis.x .tick text'); 

HERE is an example.

Answer 2

They do not exist in d3 specifically, but you can use the .firstChild and .lastChild on node.

You can select all the parents of the node first and then act within the framework of the .each() method, for example:

 d3.selectAll('.myParentElements').each(function(d,i){ var firstChild = this.firstChild, lastChild = this.lastChild; //Do stuff with first and last child }); 

Within the framework of .each() , this refers to an individual node that is not wrapped by d3 selection, therefore all standard methods on node are available.

Answer 3

Since google brought me here, I also want to add a cleaner method to what Adam Gray wrote. Sometimes you just want to do this without accepting the selectAll link.

 svg.selectAll('.gridlines').filter(function(d, i,list) { return i === list.length - 1; }).attr('display', 'none'); 

The third parameter of the filter function gives you the selected list of items.

Answer 4

Using .filter() with a function also works selection.filter (filter) :

 var gridlines; gridlines = svg.selectAll('.gridlines'); gridlines.filter(function(d, i) { return i === gridlines.size() - 1; }).attr('display', 'none'); 

Answer 5

Here is the cleanest method I've found:

 g.selectAll(".tick:first-of-type text").remove(); g.selectAll(".tick:last-of-type text").remove(); 

Answer 6

This is for D3.js v4

 d3.selection.prototype.first = function() { return d3.select( this.nodes()[0] ); }; d3.selection.prototype.last = function() { return d3.select( this.nodes()[this.size() - 1] ); }; 

Example:

 var lines = svg.selectAll('line'); lines.first() .attr('transform','translate(4,0)'); lines.last() .attr('transform','translate(-4,0)');