d3js circles

by aka_SKIff

JavaScript

var startPoint = [50,50];

var dataset = [{x:150,y:150},{x:260,y:30},{x:200,y:50}];

var svg = d3.select("body").append('svg').attr('width', 300).attr('height', 300);

var cirs = svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('r', 30)
.attr('cx', function(d, i){return d.x;})
.attr('cy', function(d, i){return d.y;})
.attr('fill', 'red')
      
cirs.on('click', function(){
    var obj = d3.select(this);
    var x = parseInt(obj.attr('cx'));
    obj.transition()
    .duration(1000)
    .attr('cx', x - 100)
    .ease('elastic');
    
});