Tutorial by Examples

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

You can select elements with different selectors : by tag : "div" by class : ".class" by id : "#id" by attribute : "[color=blue]" multiple selectors (OR): "div1, div2, class1" multiple selectors (AND): "div1 div2 class1"

var myData = [ { name: "test1", value: "ok" }, { name: "test2", value: "nok" } ] // We have to select elements (here div.samples) // and assign data. The second parameter of data() is really important, // it will determine the "key" t...

What is an enter selection? In D3.js, when one binds data to DOM elements, three situations are possible: The number of elements and the number of data points are the same; There are more elements than data points; There are more data points than elements; In the situation #3, all the data ...

Most of functions in D3.js accept an anonymous function as an argument. The common examples are .attr, .style, .text, .on and .data, but the list is way bigger than that. In such cases, the anonymous function is evaluated for each selected element, in order, being passed: The current datum (d) ...