Learning D3.js 4 Mapping - Second Edition

However, D3 implements transitions on selections, and we don't have selections yet. A single D3 selection is an element with bound data. With D3 you select a DOM element, usually SVG, join data to it, and you have a selection with all its wondrous methods: the explicit enter() and exit() methods, the implicit update() method triggered by data(), as well as transition() and their helpers duration() and delay() that control the transition.

To create selections, you just create DOM-like elements, and the great thing is, you don't need the incarnated DOM to do so. You can create them in memory. Here's how:

var customBase = document.createElement('custom')
var custom = d3.select(customBase);

You can imagine customBase as a replacement of a root SVG element and custom to be a fully-fledged D3 selection. With your foundation in place you can go about the usual D3 business of binding data to your custom elements with the databind() function:

function databind(data) { }

First, we join the data passed into the databind() function:

    var join = custom.selectAll('custom.drop')
        .data(data, function(d) { return d.currentIndex; });

The key function passed in as the second argument to data isn't strictly necessary in this case, but is good practice as it makes the join unambiguous and can have performance benefits.

Now you create your selection states. The enter selection is first:

var enter = join
  .enter().append('custom')
    .attr('class', 'drop')
    .attr('cx', function(d) { return d.xCloud; })
    .attr('cy', function(d) { return d.yCloud; })
    .attr('r', function(d) { return d.radiusCloud; })
    .attr('fillStyle', 'rgba(0, 0, 255, 0')
  .transition().delay(function(d, i) { return i * 2; })
    .attr('fillStyle', 'rgba(0, 0, 255, 0.2');

There are two things of note about the two bottom lines setting the fillStyle attribute. When you work with SVG the last line would be:

.style('color', 'rgba(0, 0, 255, 0.2')

But with Canvas you use .attr(). Why? Your main interest here is to find a pain-free way to transfer some element-specific information. Here you want to transfer a color string from the databind() to the draw() function. You use the element simply as a vessel to transport your data over to where it is being rendered to the canvas.

That's a very important distinction: when working with SVG or HTML you can bind data to elements and draw or apply styles to the elements in one step. In Canvas, you need two steps. First, you bind the data then you draw the data. You can't style the elements while binding. They only exist in memory and Canvas can't be styled via CSS style properties, which is exactly what you access when using .style().

Let's have a quick look at how the customBase element looks after we've created and appended the enter selection to it:

Our custom root element showing 30 of our raindrops in enter-state

Looks familiar in structure, doesn't it?

Next, you define the update selection, and finally the exit selection:

var update = join
  .transition()
    .duration(function() { return Math.random() * 1000 + 900; })
    .delay(function(d,i) { return (i / data.length) * dur; })
    .ease(d3.easeLinear)
    .attr('cx', function(d) { return d.xPuddle; })
    .attr('cy', function(d) { return d.yPuddle; })
    .attr('r', function(d) { return d.radiusPuddle; })
    .attr('fillStyle', '#0000ff');

var exit = join
  .exit().transition()
    .duration(dur)
    .delay(function(d,i) { return i ; })
    .attr('r', function(d) { return d.radiusGrass; })
    .attr('fillStyle', '#01A611');

That's all that goes into databind().

Table of Contents for
Learning D3.js 4 Mapping - Second Edition

Binding the data

Table of Contents for Learning D3.js 4 Mapping - Second Edition

Table of Contents for
Learning D3.js 4 Mapping - Second Edition