1wheel/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Fire event during a transition
https://github.com/mbostock/d3/wiki/Transitions#wiki-attrTween
https://github.com/mbostock/d3/wiki/Transitions#interpolation

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 400,
    parameters = [0.4, 0.3, 0.2, 0.1];

var x = d3.scale.ordinal()
    .domain(parameters)
    .rangeRoundBands([0, width], .5);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", x.rangeBand())
    .attr("height", x.rangeBand())
    .attr("x", x)
    .attr("y", -x.rangeBand())
  .transition().duration(3000)
    .attrTween('y', function(d, i, a){
      var interpolator = d3.interpolate(a, 400);
      var halfWayDone = false;
      return function(t){
        if (t > .5 && !halfWayDone){
          d3.select('body').append('div').text('halfway done at ' + t);
          halfWayDone = true;
        }
        return interpolator(t);
      }
    })

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 400,
	parameters = [0.4, 0.3, 0.2, 0.1];

	var x = d3.scale.ordinal()
	.domain(parameters)
	.rangeRoundBands([0, width], .5);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("rect")
	.attr("width", x.rangeBand())
	.attr("height", x.rangeBand())
	.attr("x", x)
	.attr("y", -x.rangeBand())
	.transition().duration(3000)
	.attrTween('y', function(d, i, a){
	var interpolator = d3.interpolate(a, 400);
	var halfWayDone = false;
	return function(t){
	if (t > .5 && !halfWayDone){
	d3.select('body').append('div').text('halfway done at ' + t);
	halfWayDone = true;
	}
	return interpolator(t);
	}
	})

	</script>