Question

I’ve tried

d3.select(".cell:first")
d3.selectAll(".cell").filter(":first")
d3.selectAll(".cell").select(":first")

but neither work

Answer 1

d3.select(".cell") already selects the first matched element:

Selects the first element that matches the specified selector string, returning a single-element selection. If no elements in the current document match the specified selector, returns the empty selection. If multiple elements match the selector, only the first matching element (in document traversal order) will be selected.

Source: https://github.com/mbostock/d3/wiki/Selections#wiki-d3_select

“How would I get the last item?“

D3 appears to return the results of d3.selectAll() in a collection, positioned in an array. For instance, requesting all paragraphs on the d3 homepage results in:

[ Array[32] ] // An array with a single array child. Child has 32 paragraphs.

So if we wanted to get the last paragraph from that collection, we could do the following:

var paragraphs = d3.selectAll("p");
var lastParag  = paragraphs[0].pop();

Or more concisely:

var obj = d3.select( d3.selectAll("p")[0].pop() );

“What about :last-child?”

The :last-child selector isn’t the same as getting the last element on a page. This selector will give you the elements that are the last child of their parent container. Consider the following markup:

<div id="foo">
  <p>Hello</p>
  <p>World</p>
  <div>English</div>
</div>
<div id="bar">
  <p>Oie</p>
  <p>Mundo</p>
  <div>Portuguese</div>
</div>

In this example, running d3.select("p:last-child") won’t return any of your paragraphs. Even d3.selectAll("p:last-child") won’t. Neither of those containers have a last child that is a paragraph (they are <div> elements: <div>English</div> and <div>Portuguese</div>).