DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[Adding events]]|[[Adding a tooltip]] ->|

====== Using transitions and animations =====

<code>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');</code>