D3 Selections allow
data-driven transformation of the
document object model (DOM) :
set attributes, styles, properties, HTML or text content, etc. Using the data join's enter and exit selections, you can also add or remove elements to correspond to data.
Method |
Description |
d3.select(css-selector) |
Returns the first matching element in the HTML document based on specified css-selector |
d3.selectAll(css-selector) |
Returns all the matching elements in the HTML document based on specified css-selector |
Example :
<div class="container">
<h2>Select DOM Elements using D3</h2>
<section id="chart">
<div class="item">Barot Bellingham</div>
<div class="item">Hassum Harrod</div>
<div class="item">Jennifer Jerome</div>
<div class="item">Richard Tweet</div>
<div class="item">Lorenzo Garcia</div>
<div class="item">Xhou Ta</div>
</section>
</div>
d3.selectAll('.item:nth-child(2n)')
.style("color", "green");