Basic D3 Enter/Update/Delete paradigm

by Michael Underwood

JavaScript

var data = [137,2,3,4];
var next = 5;

function update () {
    var items = d3.selectAll('li')
        .data(data);
    
    // Enter -- what needs to be done to add a DOM element for each datum
    items.enter()
        .append('li');
    // Update -- what needs to be done to make the datum DOM elements appear as desired
    items.text(function (d) { return d; });
    // Exit -- what needs to be done to a DOM element whose datum no longer exists
    items.exit()
        .remove();
}

d3.select('body').append('button')
    .text('add one')
    .on('click', function () {
        data.push(next++);
        update();
    });

d3.select('body').append('button')
    .text('remove one')
    .on('click', function () {
        data.pop();
        update();
    });

d3.select('body').append('button')
    .text('change one')
    .on('click', function () {
        if (data[0] & 1) {
            data[0] += 1;
        } else {
            data[0] /= 2;
        }
        update();
    });

update();