D3.js tutorial - Part 2 - Selectors

d3.select()

D3.js offers two simple ways to select HTML elements. The first one is d3.select(); which select the first element. The element to select is defined thanks to CSS style selectors. Here are some example :

• d3.select('h1'); - select the first <h1> tag from the DOM.
• d3.select('#myID'); - select the element with ID myId from the DOM.
• d3.select('.myClass'); - select the element with class myClass from the DOM.

Here is a small example that select elements from the DOM:

d3.selectAll()

You can also select several elements at one time. This is the role of the d3.selectAll() function. This functions works as the previous one, but select several elements at the smae time:

• d3.select('.myClass'); - select all the elements with class myClass from the DOM.

See also

• D3.js tutorial
• D3.js tutorial - Part 1 - Start with D3.js
• D3.js tutorial - Part 3 - Basic methods
• D3.js tutorial - Part 4 - Method chaining
• D3.js tutorial - Part 5 - Create SVG and draw a circle
• D3.js tutorial - Part 6 - Basic shapes
• D3.js tutorial - Part 7 - Data binding
• D3.js tutorial - Part 8 - Bar chart
• D3.js tutorial - Part 9 - Resize chart
• D3.js tutorial - Part 10 - Scale chart
• D3.js tutorial - Part 11 - Responsive chart
• D3.js tutorial - Part 12 - Axes

---