Andrew-Reid/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This method of getting interpolated attribute values during a transition uses a timer ( as opposed to a tween function ) which can be started at the beginning of a transition and repeatedly finds the value of a given element's attribute until stopped (this could be stopped by a transition end event itself). The other option using a timer is to use the timer itself to transition an object. This approach can be found in this answer on SO.

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


<script>

var width = 960,
    height = 500;


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

var text = svg.append("text")
  .attr("x",40)
  .attr("y",440)
  .text("From Tween Function x:");

var circle = svg.append("circle")
  .attr("cx",20)
  .attr("cy",20)
  .attr("r",10)
  .attr("fill","orange");

circle.transition()
  .attr("cx",920)
  .attr("cy",440)
  .duration(5000)

var timer = d3.timer(function(t) {
  if (t > 5000) this.stop();
  text.text("x:" + circle.attr("cx"));

});


</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	</style>
	<body>
	<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>


	<script>

	var width = 960,
	height = 500;


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

	var text = svg.append("text")
	.attr("x",40)
	.attr("y",440)
	.text("From Tween Function x:");

	var circle = svg.append("circle")
	.attr("cx",20)
	.attr("cy",20)
	.attr("r",10)
	.attr("fill","orange");

	circle.transition()
	.attr("cx",920)
	.attr("cy",440)
	.duration(5000)

	var timer = d3.timer(function(t) {
	if (t > 5000) this.stop();
	text.text("x:" + circle.attr("cx"));

	});



	</script>