D3.js Template

by alexcat

HTML

<svg width="100%" height="100%"></svg>

CSS

svg circle {
    stroke: black;
    stroke-width: 2px;
}

JavaScript

var svg = d3.select('svg');

var dataSet = [1, 2, 3, 4];

var circle = svg.selectAll('circle')
    .data(dataSet)
    .enter().append('circle')
    .attr({
        r:50,
        cx:function(d, i){ return 60 + i * 50 },
        cy:60,
        fill: 'red',
        id:function(d,i){ return "circle-"+d;}
    });

d3.selectAll("circle")
    .on("mouseover", function(){
        // move to front
        this.parentNode.appendChild(this);
    })
    .on("mouseout", function(d){
        // move back to origin
        var nextSibling = d3.select("#circle-"+(d+1)).node();
        this.parentNode.insertBefore(this, nextSibling);
});