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

Question

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

I am trying to select them, one at t

Answer 1

As google brought me here, I also want to add a cleaner method to what Adam Grey wrote. Sometimes you just want to do it without taking a reference of selectAll .

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

the 3rd parameter of the filter function gives you the selected List of elements.

Answer 2

Here's the cleanest method I've found:

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

Answer 3

They don't exist in d3 specifically, but you can use the .firstChild and .lastChild methods on a node.

You can first select all of the parents of the node, and then operate within the scope of a .each() method, like so:

d3.selectAll('.myParentElements').each(function(d,i){
  var firstChild = this.firstChild,
      lastChild = this.lastChild;

  //Do stuff with first and last child
});

Within the scope of .each(), this refers to the individual node, which is not wrapped by a d3 selection, so all of the standard methods on a node are available.

Answer 4

It's 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)');

Answer 5

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

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 would let you 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 only have one axis if you do it that way. Otherwise, specify the axis in your initial selection:

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

HERE is an example.

Answer 6

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