Точки разбегаеются

by Kate Mokhova

JavaScript

var data=[
    {'a': 1, b: 2},
    {'a': 42, b: 3},
    {'a': 135, b: 4},
    {'a': -5, b: 8},
    {'a': 26, b: 8},
    {'a': 18, b: 5} 
]



 var margin = {top: 20, right: 10, bottom: 20, left: 10};
 var fullWidth=900, fullHeight=700; 
 var width = fullWidth - margin.left - margin.right,
     height = fullHeight - margin.top - margin.bottom;


 var x=d3.scale.linear()   
    .domain([0,50])
    .range([50, 1000]);

 var y=d3.scale.linear()   
    .domain([0, 50])
    .range([50, 700]);

 var color=d3.scale.linear()   
    .domain([0, 10])
    .range(['#500', '#f00'])


d3.select('body')
    .append('svg')
    .attr('width', fullWidth)
    .attr('height', fullHeight)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .selectAll('circle')
    .data(data).enter()
    .append('circle')
    .attr('cx', function (d, i) {return x(0)          })
    .attr('cy', function (d, i) {return y(0)        })
    .attr('fill', function (d, i) { return color(d.b) })
    .attr('r', 20)
    .on('click', function (d, i) {
        d3.selectAll('circle')
       .data(data)
       .attr('cx', function (d, i) {return x(i)          })
       .transition().attr("x",d).ease("elastic").duration(1000)
       .attr('cy', function (d, i) {return y(d.a)        })
           
       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
        
    } )
    
   /*.on('mouseout', function (d, i) {
        d3.selectAll('circle')
       .data(data)
       .attr('cx', function (d, i) {return x(0)          })
       .attr('cy', function (d, i) {return y(0)        })
       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
       
    } )*/