binding api

by Igor Cuckovic

HTML

<div id="exit">
<div class="right"></div>
    </div>

JavaScript

/* binding api */

var data = [50, 100, 150, 200];

var divs = d3.select('#exit .right')
    .selectAll('div.item')
    .data(data);

var max = d3.max(data, function(d){ return d;});

console.log(max);

var scale = d3.scale.linear()
            .domain([0, max])
            .range([0, 300])    

divs.enter().append('div').attr("class", "item");

divs.style({
    width: '20px',
    "margin-top": function(d, i){ return 200 - d + 'px';},
    height: function(d, i){ return d + 'px';},
    float: "left",
    "margin-left": "15px",
    "background-color": "steelblue"
});

/*--------------------*/

var data1 = [50, 100];

divs = d3.select('#exit .right')
    .selectAll('div.item')
    .data(data1);

divs.exit().transition().duration(1000).style({"background-color": "darkred"})