The D3 selection plays important role in our D3 visualization project. Selections allow us to select an element on the page. Once an element is selected, we can perform powerful data-driven transformation of the document object model (DOM): set attributes, styles, properties, HTML or text content, and more.
The D3 has its own selection API, as standard W3C selection have the limitation when it comes to visualization. When selecting multiple elements in W3C we have to use a loop to iterate the multiple selections and we can easily handle with the D3 section.
Selecting a single element and selecting all paragraph element
D3 have two selection function, d3.select, and d3.selectAll. The d3.select will select the first match element and d3.selectall will return an array of array of selected DOM element.
In above example, we are first selecting first p element with id as the target and second code we are selecting all p element in the page with D3 select. All the D3 selections support a set of standard modifier functions. The text function in above code is one of example.
Adding style to selected element
The style() function allows us to set the CSS style on the selected element.
In D3 version 4 doesn’t support styles and attrs, not style and attr as before. The code below will generate an error in D4 version 4.
Adding and remove class to selected element
In D3 selection.classed function allows us to add and remove CSS classes on the selected element as follow.
We can use attr function to apply two class box and content to all div in our page.
Setting or Modifying an Attribute
The selection.attr function allows us to set or update a given attribute on the selected element.
Adding text to content of the element
The selection.text function allows us to access and set the text content of the selected element.
Iterating through D3 a selection:
We can easily iterate in D3 multiple selections. The each function takes an iterator function as the parameter. The each function takes two optional parameter d and i and one more hidden parameter passed in as this reference, which points to the current DOM element object. Where i represent index number of current element object being iterated through.
Scope selection, some time we have to select all elements of a particular tag within particular section element.We can achieve subselection in the number of ways.
Here in above code, we are removing the last row in the table.
- Child Combinator: The child combinator offers a more strict way to achieve a parent-child relationship between two elements. We can define child with character > separating between parent and child selector as follow parent > child
- Descendant combinator: The descendant combinator provides the loose parent-child relationship between two selection. The relationship can be a parent to child, or grandchild or greater grandchild. Example
- The D3 nested subselection: We can also select parent element along with it sub-element.
Selecting and manipulating table elements
The D3 allows us to easily select table element. We can select all table row and all column at once. We can apply D3 function and style easily to selected element. In the example below, we are applying D3 to table column and row.
The D3 selection has node() function that returns an array containing the selected element node.
In the second example, we are applying some custom function on table element in D3.