test

by Igor Cuckovic

HTML

<button id="button">Transition</button>

JavaScript

var dataSet = [20, 40, 60, 80];
var dataSet1 = [20, 40, 60];

var width = 800,
    height = 600;

var svg = d3.select('body')
    .append('svg')
    .attr({
        'width': width,
        'height': height
});

var rects = svg.selectAll('rect').data(dataSet)
    .enter()
    .append('rect')
    .attr({
        'width': 20,
        'height': 20,
        'x': function (d, i) {
        return i * 50 + 50;
    },
        'y': function (d, i) {
        return i * 50 + 50;
    },
        'fill': 'steelblue'
})

d3.select('#button').on('click', function () {
    svg.selectAll('rect').data(dataSet1)
    .exit()
    .transition()
    .duration(1000)
    .style('opacity', 0 )


})