D3 Examples - Transition Values with a Timer

Transition Values with a Timer

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.

xxxxxxxxxx
 
<!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>
    