D3 DOM Manipulation And Data Binding With D3 JavaScript

D3 DOM Manipulation

Let’s talk about D3 DOM Manipulation And Data Binding With D3 JavaScript. We’re moving forward with the D3 JavaScript library and in this tutorial, we’ll have a look at some important concepts as we begin to create data driven documents. First off, we’ll build on the idea of selecting elements from the DOM, and then actually changing and updating the attributes of those elements. There are a handful of methods to help us with this, and we’ll cover an example and use case for each one. Once we see how setting attributes on our selected elements works, we’ll move on to the nitty gritty of D3, and that is the idea of data binding. This will be the beginnings of using data to power the visualizations on the page.

D3 DOM Manipulation


Changing Element Attributes and Using CSS

In the prior tutorial, we had a look at some methods of the D3 library to perform HTML D3 DOM Manipulation. It is also very common to modify the attributes and styling of those HTML elements. Let’s take a look at the selection.attr(), selection.classed(), and selection.styled() methods now.


selection.attr()

By using the .attr() method, you can read, add, or modify any attribute in a selection. The easiest way to see how this works is with a few examples.

Using .attr() to add a class

This approach is very useful if you already have a collection of CSS classes that you have written, or if you would like to make use of 3rd party class names like those found in Bootstrap or Foundation. Consider our example which has an unordered list of elements. To assign a class name to all of those elements, we could do so just like this.
d3 attr method to add a class

source before D3 script:

D3 Script to Run

source after running D3 script

note: In this example, the signature of .attr('class', 'classname') replaces any pre existing class applied to the element. We can see this because in the original source, each li has a class of .item. Once D3 does it’s work, we can now see that the .item class is gone altogether and replaced with .alert alert-warning which gives us the nice effect we see in the screenshot.


selection.classed()

The .classed() method runs a little differently. For example, we can use the signature of .classed('classname', true) to basically turn a class on, without clobbering any existing class. Let’s see how to do this.

d3 classed method to append a class
source before D3 script:

D3 Script to Run

source after running D3 script

As we can see, the .item class is left intact using this approach. The .classed() method also can accept an object as it’s argument. By doing this we can turn multiple classes on or off for a given element. Let’s select just one of the li items, turn off the .item class, then turn on two Bootstrap classes to see the result.
pass object to D3 classed method

Fantastic! Once again here is the source of before and after the script running.

source before D3 script:

D3 Script to Run

source after running D3 script

Cool! This time when we run our D3 script, the first four items are left untouched. On the fifth element however, we can see that the .item class has been turned off, the .alert alert-danger class has been turned on, and the .lead class has also been turned on.


selection.style()

What about when you are not using predefined classes, but need to generate CSS styles dynamically and on the fly so to speak? That is exactly what the .style() method is for, and it has many, many use cases for working with D3. This is going to be the most flexible approach that will give you the most control, especially for animation to effects so it pays to be familiar with how it works. Here is an example in Firebug.

d3 style method in action
source before D3 script:

D3 Script to Run

source after running D3 script

Very Slick! With this approach, we can see there is no need to rely on a third party CSS framework or handwritten classes. We simply specify the styles we need and they are applied inline. Even though we generally like to put our styles in their own dedicated stylesheets, when styling dynamically in the DOM with real time applications like D3, inline is the way it needs to happen. The other thing to consider is that this approach is going to be the way we apply style to SVG, XML, and more.


Data Binding To The Document Object Model With D3

This is where things start to get interesting and fun. So far, we’ve really only covered basic selections, and then rudimentary styling and modifying of those elements. The point of D3 is to make use of data to power our visualizations, hence the name – Data Driven Documents! Let’s see an example of very basic data binding in action.
d3 data method to bind data
source before D3 script:

D3 Script to Run

source after running D3 script

This particular example is a little bit more advanced because of the fact that we are creating an array of objects, passing that array to the .data() method to bind the data contained within, then we use the .style() method, and the value of the objects within use anonymous functions to return the variable data. Say What? In essence, if you’re not familiar with JavaScript, you’ll need to read up a bit on some of the JavaScript Tutorials here and elsewhere on the web, since we’ll need a good understanding of it. Especially important will be the idea of JavaScript functions being first class citizens in the language.

Control HTML Attributes and Bind Data To The DOM With D3 JavaScript Conclusion

Are we having fun yet? You bet we are! We’re starting to realize some of the power that working with D3 in our pages affords us. Plug this code into your own sandbox and have a play. Change the values of the data up in that final example. See what different kinds of colors and widths you can come up with. It’s just the beginning, and we’ll cover lots more in later tutorials.