Binding API

append

var svg = d3.select('#append svg') svg.append('circle') .attr({ cx: 100, cy: 100, r: 40, fill:'#25B0B0' }) svg.append('circle') .attr({ cx: 350, cy: 100, r: 40, fill:'#25B0B0' })

You can append elements to the DOM by name.

select

d3.select('#select') .select('h2') .style('background-color', '#F89830')

You can select elements using the usual CSS selectors.

selectAll

enter

var data = [50, 100, 150, 200] var div = d3.select('#enter .right2'); var divs = div .selectAll('div.item') .data(data); divs.enter() .append('div').classed('item', true) divs.style({ width:'20px', height:function(d) { return d + 'px' }, margin:'25px', float:'left', 'background-color':'#25B0B0' })

exit

data = [50, 100] divs = div.selectAll('div.item') .data(data); divs.exit().style({ 'background-color':'#B42424' })

transition

data = [100, 200, 20, 100] var divs = div.selectAll('div.item') .data(data) divs.transition() .delay(50) .duration(1000) .style({ 'height': function(d) { return d + 'px' }, 'background-color':'#42efef' })

DOM events

divs.on('click', function(d,i) { d3.select(this) .style('background-color','#42efef') .style('padding-left','10px') .text(i) });