D3 中 jQuery 的 $(".cell:first") 的等价物是什么？答案

【问题标题】：What is the equivalent of jQuery's $(".cell:first") in D3?D3 中 jQuery 的 $(".cell:first") 的等价物是什么？
【发布时间】：2012-05-25 07:23:21
【问题描述】：

我试过了

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

但都不起作用

【问题讨论】：

但是我会丢失 D3 对象，d3.select(d3.selectAll(".cell")[0]) 似乎有点多余
更深层次的解释：bost.ocks.org/mike/selection 很好的阅读！

标签： javascript jquery dom d3.js

【解决方案1】：

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

选择与指定选择器字符串匹配的第一个元素，返回单元素选择。如果当前文档中没有元素匹配指定的选择器，则返回空选择。如果多个元素匹配选择器，则仅选择第一个匹配的元素（按文档遍历顺序）。

来源：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>）。

【讨论】：

感谢乔纳森的回答。也许我很困惑地认为有一个选择器叫做:first，因为有一个叫做:first-child，所以在D3中我可以做d3.selectAll(".cell").filter(":first-child")，所以我猜:first是特定于jQuery的。对于您的回答，我仍然需要 d3.select(lastParag) 才能将其用作 D3 对象
@nachocab 正如文档所述，您没有任何理由这样做:first-child。 d3.select() 方法已经返回第一个元素。更不用说，这不会返回第一段，而是返回恰好是其父字段子字段的第一段。

【解决方案2】：

如果要从 D3 的选择中获取第一个 DOM 元素，请使用.node() 方法：

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

【讨论】：