Что эквивалентно jQuery $( ". Cell: first" ) в D3?

Ответ 1

d3.select(".cell") уже выбирает первый совпадающий элемент:

Выбирает первый элемент, который соответствует указанной строке селектора, возвращая одноэлементный выбор. Если ни один элемент в текущем документе не соответствует указанному селектору, возвращает пустой выбор. Если несколько элементов соответствуют селектору, будет выбран только первый соответствующий элемент (в порядке обхода документа).

Источник: https://github.com/mbostock/d3/wiki/Selections#wiki-d3_select

"Как я могу получить последний элемент?"

D3, как представляется, возвращает результаты d3.selectAll() в коллекции, расположенной в массиве. Например, запрос всех абзацев на странице d3 приводит к:

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

Итак, если мы хотим получить последний абзац из этой коллекции, мы могли бы сделать следующее:

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

Или более кратко:

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

"А как насчет: последнего ребенка?"

Селектор :last-child не совпадает с тем, как получить последний элемент на странице. Этот селектор предоставит вам элементы, которые являются последним дочерним элементом их родительского контейнера. Рассмотрим следующую разметку:

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

В этом примере запуск d3.select("p:last-child") не вернет ни один из ваших абзацев. Даже d3.selectAll("p:last-child") не будет. Ни один из этих контейнеров не имеет последнего дочернего элемента, который является абзацем (это <div> elements: <div>English</div> и <div>Portuguese</div>).

Ответ 2

Если вы хотите получить первый элемент DOM из выбора D3, используйте метод .node():

var sel = d3.selectAll('p'); // all <P>, wrapped with D3.selection
var el = sel.node(); // the first <P> element