D3js Data-binding basics

We can use d3.select() to select and change DOM elements, and we can create and remove elements based on data.

const books = [
  'Eloquent JavaScript',
  'JavaScript: The Good Parts',
  'JavaScript: The Definitive Guide',
  'You Don’t Know JS'
]

d3.select('body').selectAll('div.books')
  .data(books)
  .enter()
  .append('div')
  .attr('class', 'books')
  .html(function (d) {
    return d
  })

The result is:

d3.selectAll()

We start a selection using d3.selectAll() with a CSS identifier. Often there’s no elements match this identifier, and we then use .enter() function to create new elements.

.data()

We associate the data array with the elements which we selected using d3.selectAll(). For example we can access the first item of the array using code like this:

document.getElementsByClassName("books")[0].__data__

.enter() and .exit()

When we have more data items then DOM elements in the selection, .enter() function can be triggered to handle extra values; If we have less data values then DOM elements in the selection, .exit() is triggered. If data values and elements are equal, then neither function is triggered.

.append()

.append() function add more elements to the DOM according to the number of our data values. In the example above we add div elements.

.attr()

.attr() function set attributes to the element we just added.

.html

We use .html() to set content of the div. And we access data using inline function.