D3中jQuery的$(".cell:first")相当于什么？

Question

我试过了

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

但都没有工作

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