объяснение D3, пример 4

by tpew

JavaScript

data = [
    
    {'a': 10, 'b':1 },
    {'a': 16, 'b':4},
    {'a': 39, 'b':9},
    {'a': 39, 'b':7},
    {'a': 20, 'b':3},
    {'a': 11, 'b':4},
    {'a': 4, 'b':9},
    {'a':30, 'b':10},
    {'a':11, 'b':8},
    {'a':29, 'b':2},
    {'a':9, 'b':6},
    {'a':29, 'b':2},
    {'a':4, 'b':5},
    {'a':36, 'b':6},

]


var x = d3.scale.linear()
    .domain([0,5])
    .range([0, 200])
var y = d3.scale.linear()
    .domain([0,50])
    .range([100, 0])
var color = d3.scale.linear()
    .domain([0,10])
    .range(['#B00', '#666'])

var margin = {top: 20, right:10, bottom:20, left: 10}

var width = 600 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg
    .selectAll('circle')
    .data(data).enter()
    .append('circle')
    .attr('r', 10)
    .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)    })
.on("mouseover", function() {
         d3.select(this)
       //.transistion()
         .transition()
        .attr('r', 20)
        .style('opacity', 0.5)    
})
.on("mouseout", function() {
         d3.select(this)
         //.transistion()
         .transition()
        .attr('r', 10)
        .style('opacity', 1)
})
.on("click", function() {
        d3.select(this)
        
})