在D3中相当于jQuery的$（“.cell：first”）是什么？ [英] What is the equivalent of jQuery's $(".cell:first") in D3?

问题描述

我尝试过

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

我将如何获得最后一个项目？

D3看起来返回位于数组中的集合中的 d3.selectAll（）的结果。例如，请求 d3首页上的所有段落会导致：

// [Array [32]] //具有单个数组子元素的数组。孩子有32段。

因此，如果我们想从该集合中获取最后一个段落，可以执行以下操作： p>

  var paragraphs = d3.selectAll（p）; 
 var lastParag = paragraph [0] .pop（）; 
  

或更简洁：

  var obj = d3.select（d3.selectAll（p）[0] .pop（））; 
  

what-c​​hild？

：last-child 选择器与获取页面上的最后一个元素不同。这个选择器将给你的父容器的最后一个子元素。考虑以下标记：

 < div id =foo> 
< p>您好< / p> 
< p>世界< / p> 
< div>英语< / div> 
< / div> 
< div id =bar> 
< p> Oie< / p> 
< p> Mundo< / p> 
< div>葡萄牙语< / div> 
< / div> 
  

在此示例中，运行 d3.select（p：last-child ）不会返回任何段落。即使 d3.selectAll（p：last-child）也不会。这些容器都不是最后一个子元素是段落（它们是< div> 元素：< div> English< / div> / code>和< div> Portuguese< / div> ）。

I've tried

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

but neither work

解决方案

d3.select(".cell") already selects the first matched element:

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.

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

"How would I get the last item?"

D3 appears to return the results of d3.selectAll() in a collection, positioned in an array. For instance, requesting all paragraphs on the d3 homepage results in:

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

So if we wanted to get the last paragraph from that collection, we could do the following:

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

Or more concisely:

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

"What about :last-child?"

The :last-child selector isn't the same as getting the last element on a page. This selector will give you the elements that are the last child of their parent container. Consider the following markup:

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

In this example, running d3.select("p:last-child") won't return any of your paragraphs. Even d3.selectAll("p:last-child") won't. Neither of those containers have a last child that is a paragraph (they are <div> elements: <div>English</div> and <div>Portuguese</div>).

这篇关于在D3中相当于jQuery的$（“.cell：first”）是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！