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);

divs.enter().append('div').classed('item', true);

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().style({"background-color": "darkred"})