D3.js enter update exit - data as function

D3 DataVisualization Cookbook Chapter 3

by Denise Nepraunig

HTML

<h1>Enter Update Exit</h1>
<div id="container"></div>

CSS

.v-bar {
    background-color: teal;
    text-align: right;
    padding-right: 3px;
}
div {
    float: left;
}

JavaScript

var interval = 0;
    var data = []; // <- A

    var next = function (x) { // <- B
        return 15 + x * x;
    };

    var newData = function () { // <- C        
        data.push(next);
        return data;
    };

    function render() {
        interval++;
        
        var selection = d3.select("#container")
            .selectAll("div")
            .data(newData); // <- D

        selection.enter().append("div").append("span");

        selection.exit().remove();

        selection.attr("class", "v-bar")
            .style("height", function (d, i) {
            return d(i) + "px"; // <- E
        })
            .select("span")
            .text(function (d, i) {
            return d(i); // <- F
        });
        
        // draw max. 20 divs
        if(interval>20){
            clearInterval(drawInterval);
        }
    }

    var drawInterval = setInterval(function () {
        render();
    }, 1500);

    render();