相当于 jQuery 在 D3 中的 $(“.cell:first”）

What is the equivalent of jQuery's $(".cell:first") in D3?

本文关键字：cell first jQuery D3 中的 相当于      更新时间：2023-09-26

我试过了

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

但两者都不起作用

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

如果要

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

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