11

私はもう試した

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

しかし、どちらも機能しません

4

2 に答える 2

26

d3.select(".cell")すでに最初に一致した要素を選択しています:

指定されたセレクター文字列に一致する最初の要素を選択し、単一要素の選択を返します。現在のドキュメント内に指定されたセレクターに一致する要素がない場合は、空の選択を返します。複数の要素がセレクターに一致する場合、最初に一致する要素 (ドキュメントの走査順序で) のみが選択されます。

ソース: https://github.com/mbostock/d3/wiki/Selections#wiki-d3_select

「最後のアイテムはどうやって手に入れるの？」

D3d3.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 はどうですか?」

セレクターは、ページの: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>です)。

于 2012-05-17T17:24:41.140 に答える
4

D3 の選択から最初の DOM 要素を取得する場合は、次の.node()メソッドを使用します。

var sel = d3.selectAll('p'); // all <P>, wrapped with D3.selection
var el = sel.node(); // the first <P> element
于 2014-01-29T11:27:51.267 に答える