jlegewie/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A test of d3.interpolateZoom plugin with text elements.

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

.mesh {
  fill: none;
  stroke: #000;
  stroke-width: .25px;
}

.start {
  fill: none;
  stroke: brown;
}

.end {
  fill: none;
  stroke: steelblue;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/d3/d3-plugins/master/interpolate-zoom/interpolate-zoom.js"></script>
<script>

var width = 960,
    height = 500,
    radius = 10;

var p0 = [250, 200, 60],
    p1 = [560, 300, 120];

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .call(transition, p0, p1);

svg.selectAll("circle")
    .data([p0, p1])
  .enter().append("circle")
    .attr("class", function(d, i) { return i ? "end" : "start"; })
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; })
    .attr("r", function(d) { return d[2] / 2 - .5; });

function transition(svg, start, end) {
  var center = [width / 2, height / 2],
      i = d3.interpolateZoom(start, end);

  svg
      .attr("transform", transform(start))
    .transition()
      .delay(250)
      .duration(i.duration * 2)
      .attrTween("transform", function() { return function(t) { return transform(i(t)); }; })
      .each("end", function() { d3.select(this).call(transition, end, start); });

  svg.selectAll("text")
    .data(d3.range(10,height,50).map(function(x) {return {'x':x,'y':x};}))
  .enter().append("text")
    .attr('x',function(d) {return d.x;})
    .attr('y',function(d) {return d.y;})
    .text("these are all text elements");

  function transform(p) {
    var k = height / p[2];
    return "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";
  }
}

</script>

## thumbnail.png

      
    Raw
  

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

	.mesh {
	fill: none;
	stroke: #000;
	stroke-width: .25px;
	}

	.start {
	fill: none;
	stroke: brown;
	}

	.end {
	fill: none;
	stroke: steelblue;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://raw.github.com/d3/d3-plugins/master/interpolate-zoom/interpolate-zoom.js"></script>
	<script>

	var width = 960,
	height = 500,
	radius = 10;

	var p0 = [250, 200, 60],
	p1 = [560, 300, 120];

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.call(transition, p0, p1);

	svg.selectAll("circle")
	.data([p0, p1])
	.enter().append("circle")
	.attr("class", function(d, i) { return i ? "end" : "start"; })
	.attr("cx", function(d) { return d[0]; })
	.attr("cy", function(d) { return d[1]; })
	.attr("r", function(d) { return d[2] / 2 - .5; });

	function transition(svg, start, end) {
	var center = [width / 2, height / 2],
	i = d3.interpolateZoom(start, end);

	svg
	.attr("transform", transform(start))
	.transition()
	.delay(250)
	.duration(i.duration * 2)
	.attrTween("transform", function() { return function(t) { return transform(i(t)); }; })
	.each("end", function() { d3.select(this).call(transition, end, start); });

	svg.selectAll("text")
	.data(d3.range(10,height,50).map(function(x) {return {'x':x,'y':x};}))
	.enter().append("text")
	.attr('x',function(d) {return d.x;})
	.attr('y',function(d) {return d.y;})
	.text("these are all text elements");

	function transform(p) {
	var k = height / p[2];
	return "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";
	}
	}

	</script>