mbostock/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Transitions between transforms are inherently ambiguous; there are multiple valid paths between transforms. For example, when transitioning from “rotate(180)translate(0,-100)” to “rotate(360)translate(0,-100)”, the simplest interpretation rotates from 180º to 360º, but another valid interpretation goes from “translate(0,100)rotate(180)” to “translate(0,-100)rotate(0)”.
d3.interpolateTransform chooses the latter interpretation because it first decomposes transforms into a canonical representation. This allows transitions between more complicated transforms that do not share the same structure.
In D3 2.10, you can change this behavior by specifying an interpolator via d3.tween. For example, you can use d3.interpolateString to interpolation the rotation angle.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

circle {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 480,
    height = 500;

var svg = d3.select("body").selectAll("svg")
    .data(["interpolateTransform", "interpolateString"])
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(240,250)");

svg.append("circle")
    .attr("r", 100);

svg.append("text")
    .attr("dy", "-.3em")
    .attr("text-anchor", "middle")
    .text(String)
    .each(cycle);

function cycle(d) {
  d3.select(this).transition()
      .duration(4000)
      .attrTween("transform", function(interpolate) {
        return d3[interpolate](
          "rotate(180)translate(0,-100)",
          "rotate(360)translate(0,-100)"
        );
      })
      .each("end", cycle);
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	text {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	circle {
	fill: none;
	stroke: #000;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 480,
	height = 500;

	var svg = d3.select("body").selectAll("svg")
	.data(["interpolateTransform", "interpolateString"])
	.enter().append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(240,250)");

	svg.append("circle")
	.attr("r", 100);

	svg.append("text")
	.attr("dy", "-.3em")
	.attr("text-anchor", "middle")
	.text(String)
	.each(cycle);

	function cycle(d) {
	d3.select(this).transition()
	.duration(4000)
	.attrTween("transform", function(interpolate) {
	return d3[interpolate](
	"rotate(180)translate(0,-100)",
	"rotate(360)translate(0,-100)"
	);
	})
	.each("end", cycle);
	}

	</script>