d3.js Selections Basic selection and modifications

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

If you are familiar with jQuery and Sizzle syntax, d3 selections should not be much different. d3 mimics the W3C Selectors API to make interacting with elements easier.

For a basic example, to select all <p> and add a change to each of them:

d3.selectAll('p')
  .attr('class','textClass') 
  .style('color', 'white');

In a nutshell this is relatively the same as doing in jQuery

$('p')
  .attr('class','textClass') 
  .css('color, 'white')

Generally you will start with a single select to your container div to add an SVG element which will be assigned to a variable (most commonly called svg).

var svg = d3.select('#divID').append('svg');

From here we can call on svg to do our sub-selections of multiple objects (even if they don't yet exist).

svg.selectAll('path')


Got any d3.js Question?