dvd3js:using_transitions_and_animations
Using transitions and animations
var bardata = []; for (var i = 0; i < 50; i++) { bardata.push(Math.random() * 30); } var height = 400; var width = 600; var barWidth = 50; var barOffset = 5; // linear scale var yScale = d3.scale.linear() .domain([0, d3.max(bardata)]) .range([0, height]); // ordinal scale var xScale = d3.scale.ordinal() .domain(d3.range(0, bardata.length)) .rangeBands([0, width]); var colors = d3.scale.linear() //.domain([0, d3.max(bardata)]) //.domain([0, bardata.length]) .domain([0, bardata.length * .33, bardata.length * .66, bardata.length]) //.range(['#FFB832', '#C61C6F']); .range(['#B58929', '#C61C6F', '#268BD2', '#85992C']); var mychart = d3.select('#chart').append('svg') .attr('width', width) .attr('height', height) .style('background', '#C9D7D6') .selectAll('rect').data(bardata) .enter().append('rect') //.style('fill', colors) .style('fill', function (d, i) { return colors(i); }) .attr('width', xScale.rangeBand()) .attr('height', 0) .attr('x', function (d, i) { return xScale(i); }) .attr('y', height) .on('mouseover', function (d) { d3.select(this) .transition() .style('opacity', .5) .style('fill', 'cyan'); }) .on('mouseout', function (d) { d3.select(this) .transition().delay(500).duration(800) .style('opacity', 1) //.style('fill', tempColor); }); mychart.transition() .attr('height', function (d) { return yScale(d); }) .attr('y', function (d) { return height - yScale(d); }) .delay(function (d, i) { return i * 8; }) .ease('elastic');
dvd3js/using_transitions_and_animations.txt · Last modified: 2016/04/14 17:49 by leo