<div>
<svg width="1000" height="200">
<g class="container" transform="translate(100, 100)"></g>
</svg>
</div>
<div id="menu">
<div class="add" onClick="action('add');">Add item</div>
<div class="remove" onClick="action('remove');">Remove item</div>
<div class="update" onClick="action('update');">Update items</div>
</div>body {
font-family: sans-serif;
background-color: #F9F7EB;
}
circle {
fill: #af90ca;
}
#menu div {
display: inline-block;
padding: 5px 10px;
margin-right: 10px;
background-color: #aaa;
color: white;
border-radius: 5px;
transition: 0.3s background-color;
cursor: pointer;
user-select: none;
}
#menu div:hover {
background-color: #777;
}var myData = [ 10, 40, 30, 50, 20 ];
var circleSpacing = 100;
var transitionDuration = 500;
function update() {
d3.select('g.container')
.selectAll('circle')
.data(myData)
.join(
function(enter) {
return enter
.append('circle')
.style('opacity', 0);
},
function(update) {
return update;
},
function(exit) {
return exit
.transition()
.duration(transitionDuration)
.attr('r', 0)
.style('opacity', 0)
.attr('cx', 1000)
.on('end', function() {
d3.select(this).remove();
});
}
)
.attr('cx', function(d, i) {
return i * circleSpacing;
})
.transition()
.duration(transitionDuration)
.attr('r', function(d) {
return d;
})
.style('opacity', 1);
}
function action(type) {
let obj = {
add: () => myData.push(50 * Math.random()),
remove: () => myData.pop(),
update: () => myData = myData.map(v => 50 * Math.random())
};
obj[type]();
update();
}
update(myData);
External CSS
This Pen doesn't use any external CSS resources.