D3 enter exit test

by Alexander Shutov

HTML

<svg></svg>

JavaScript

function randomColor() {
    return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}

var data = [{
    id: 1,
    name: 'A'
}, {
    id: 2,
    name: 'B'
}, {
    id: 3,
    name: 'C'
}];

var svg = d3.select('svg')
    .attr('width', 400)
    .attr('height', 300);

function update(data) {

    // Update

    var items = svg.selectAll('g')
        .data(data);

    items.select('text')
        .text(function (d) {
        return d.name;
    });

    // Enter

    var enterItems = items.enter()
        .append('g')
        .attr('transform', 'translate(0,0)')
        .attr('id', function (d) {
        return d.id;
    });

    enterItems.attr('opacity', 0)
        .transition()
        .duration(500)
        .attr('opacity', 1)
        .attr('transform', function (d) {
        return ('translate(' + (50 + data.indexOf(d) * 100) + ',' + 50 + ')');
    });

    enterItems.append('rect')
        .attr({
        x: -25,
        y: -25,
        width: 50,
        height: 50,
        fill: function (d) {
            return randomColor();
        }
    });

    enterItems.append('text')
        .text(function (d) {
        return d.name;
    })
        .attr({
        fill: 'white',
            'font-size': 25,
            'font-family': 'sans-serif',
        x: 0,
        y: 7.5,
            'text-anchor': 'middle'
    });

    // Exit

    var exitItems = items.exit()
        .transition()
        .duration(500)
        .attr('opacity', 0)
        .remove();
}

update(data);

setTimeout(function () {
    data[0].name = 'X';
    update(data);
}, 1000);

setTimeout(function () {
    data[0] = {
        id: 1,
        name: 'A'
    };
    update(data);
}, 2000);

var removed;

setTimeout(function () {
    removed = data.splice(1, 1)[0]
    update(data);
}, 3000);

setTimeout(function () {
    data.splice(1, 0, removed);
    update(data);
}, 4000);