d3.js Selections Basic selection and modifications


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')