[D3] Animate with the General Update Pattern in D3 v4

In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selections. When a chart's data changes over time and each update can both create new elements and destroy existing ones, the General Update pattern can help convey meaning to users. This lesson demonstrates the pattern using animated transitions on a column chart.

 

function render(subject = 'math') {

    // Define a resuable transation variable
    var t = d3.transition().duration(1000);

    var update = svg.selectAll('rect')
        .data(data.filter(d => d[subject]), d => d.name); //d => d.name is a uniq idientifier

    // First: we want to remove the existing object which doesn't have any value
        // Get rid of null value object
        // Also animation y and height attr to produce
        // fade out effect 
    update
        .exit()
        .transition(t)
        .attr('y', height)
        .attr('height', 0)
        .remove();

    // Second, we want to animate the existing elements height    
    update
        .transition(t)
        .delay(1000)
        .attr('y', d => yScale(d[subject]))
        .attr('height', d => height - yScale(d[subject]));

    // Last, for the new data which is not in the page before
        // We want to animate    
    update
        .enter()
        .append('rect')
        .attr('y', height)
        .attr('height', 0)
        .attr('x', d => xScale(d.name))
        .attr('width', d => xScale.bandwidth())
        .transition(t)
        .delay(update.exit().size() ? 2000: 0) // If page refresh, we don't want to wait 2000ms
        .attr('y', d => yScale(d[subject]))
        .attr('height', d => height - yScale(d[subject]));
}

render();