javascript - D3 中 jQuery 的 $ (".cell:first") 是什么？

Question

我试过了

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

但都不行

Answer 1

d3.select(".cell")已经选择了第一个匹配的元素:

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.

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

“我如何获得最后一项？”

D3 似乎返回 d3.selectAll() 的结果在集合中，位于数组中。例如，请求关于 d3 homepage 的所有段落结果:

[ 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 怎么样？”

: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> 元素:<div>English</div> 和 <div>Portuguese</div> )。