//Array with 4 objects var dataArray = [ {value : 'one', color:'red', width: 100}, {value: 'two', color:'green', width: 200}, {value: 'three', color:'blue', width: 150}, {value: 'four', color:'yellow', width: 300} ]; function render(data) { //First use data function and pass data var updateDivSelection = d3.select('body').selectAll('div'). data(data). style({ 'background-color': function(d){ return d.color }, 'width': function(d){ return d.width + 'px' } }); //calling style on data as well //Use enter to append the divs var enterDivSelection = updateDivSelection.enter(). append('div'). text(function(d) { return d.value }). //for inner text style({ 'background-color': function(d){ return d.color }, 'width': function(d){ return d.width + 'px' } }); //For stylling of div //Using exit to remove extra divs updateDivSelection.exit().remove(); } //Calling render function and passing the data render(dataArray); //Updating data after 1 sec and calling render again setTimeout(function() { //update first object width dataArray[0].width = '400'; //call render again render(dataArray); },1000);
<!-- no div elements initially --> <body> </body