JSFiddle - React, Tailwind, and code Playground

by dirtyd77

CSS

svg{
    border: 1px solid;
}
div{
    position: absolute;
    border: 1px solid purple;
}
circle{
    fill: blue;
    stroke: steelblue;
    stroke-width: 1;
}

JavaScript

var data = [
    {
        id: 'item1',
        value: 2
    },
    {
        id: 'item2',
        value: 4
    }
];

function update(){
    var divs = d3.select('body').selectAll('div').data(data, function(d){
        return d.id;   
    });

divs
.enter()
.append('div')
.style({
    width: '40px',
    height: '0px'
})
.transition()
.delay(function (d, i){
    return i * 1000;
})
.style({
    top: function (d, i){
        return i * 100 + 'px';
    }
});

divs.exit()
.transition()
.style({
    top: '0px',
    width: '0px',
    height: '0px'
})
.remove();

divs
.style({
    top: function (d, i){
        return (i) * 100 + 'px';
    }
})
.transition()
.delay(function (d, i){
    return i * 100;
})
.style({
     height: '100px',

});
    
}

update();

setTimeout(function (){
    data[0].id = 'item0';
    data[0].value = 6;
    data.splice(2, 0, {
        id: 'item3',
        value: 10
    });
   update();
}, 2000);

setTimeout(function (){
    data[0].id = 'item0';
    data[0].value = 6;
    data.splice(2, 0, {
        id: 'item3',
        value: 10
    });
   update();
}, 2000);