select.markdown

layout	title
docs	select

select(s)

Selects the first descendant of each node in the current selection that matches the selector s. The first descendant is determined using document order: depth-first pre-order traversal of the DOM tree or subtree in question. The descendant does not need to be an immediate child of the context node.

For example, given the following HTML:

{% highlight html linenos %}

1.	One
2.	Two
3.	Three

{% endhighlight %}

1.	One
2.	Two
3.	Three

To select all tr elements, then sub-select the first td elements, say:

{% highlight js linenos %} d3.selectAll("tr") .select("td") .style("background-color", "yellow") .apply(); {% endhighlight %}

Apply Reset

Note that this example could alternatively be written using the :first-child psuedo-class.

d3.select(s)

Selects the first descendent of the current document that matches the selector s. The first descendant is determined using document order: depth-first pre-order traversal of the DOM tree or subtree in question. The descendant does not need to be an immediate child of the root element.

For example, given the following HTML:

{% highlight html linenos %}

... {% endhighlight %}

...

To select the span, say:

{% highlight js linenos %} d3.select("#hello") .text("Hello, world!") .apply(); {% endhighlight %}

Apply Reset