Appending an element to an existing element in d3.js

http://stackoverflow.com/questions/13869414/appending-an-element-to-an-existing-element-in-d3-js

by Wexcode

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>

JavaScript

var dataset = [ 5, 10, 15, 20, 25 ];
var w = 1800;
var h = 300;
var barPadding = 1;

var container = d3.select("body").append("svg").attr("width", w).attr("height", h).append("g");

setInterval(function(){
    dataset.push(Math.floor(Math.random()*51));
    draw();
},1000);

function draw(){

    container.selectAll("rect").data(dataset).enter().append("rect")
        .attr("x", function(d, i){return 12*i;})
        .attr("y", function(d){return h -d*4; })
        .attr("width", 11)
        .attr("height", function(d) { return d * 4; })
        .attr("fill", "teal")
        .attr("fill", function(d) { return "rgb(0, 0, " + (d * 10) + ")";});
}