Разные точки

by Kate Mokhova

JavaScript

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


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


 var x=d3.scale.linear()   
    .domain([0,10])
    .range([20,200]);

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

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


 function changedata(d)
     {
        d.changedata=[{'a': 1, b: 2},
              {'a': 42, b: 3},
              {'a': 15, b: 4},
              {'a': 32, b: 8},
              {'a': 26, b: 8},
              {'a': 18, b: 5}
             ];
    return(d)}
 
 
 
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('r', 8)
    .attr('cx', function (d, i) {return x(i)          })
    .attr('cy', function (d, i) {return y(d.a)        })
    .attr('fill', function (d, i) { return color(d.b) })
    .attr('opacity', 1)
    .on('mouseover', function (d, i) {
        d3.select(this)
       .transition()
       .duration(500)
       .attr('opacity', 0.3)
       .selectAll('circle')
       .changedata(data)
       .data(data).enter()
       .attr('cx', function (d, i) {return x(i)+'10px'          })
       .attr('cy', function (d, i) {return y(d.a)        })
       .attr('fill', function (d, i) { return color(d.b) }) }       

)
       
       
    .on('mouseout', function (d, i) {
        d3.select(this)
       .transition()
       .attr('opacity', 1)
    })