JSFiddle - React, Tailwind, and code Playground

by Shang-De You

JavaScript

var startWidth = 100
var endWidth = 300

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

svg.append("rect")
	.attr("fill", "steelblue")
  .attr("x", 10)
  .attr("y", 10)
  .attr("width", startWidth)
  .attr("height", 30)
  
svg.append("text")
	.attr("fill", "white")
  .attr("x", startWidth)
  .attr("y", 10)
  .attr("dy", "1.2em")
  .attr("text-anchor", "end")
  .text(startWidth)
  
d3.transition()
	.duration(500)
  .tween("move", function(){
  	return function(t){
    	//var num = startWidth + t * (endWidth - startWidth)
      var interpolate = d3.interpolate(startWidth, endWidth)
      var num = interpolate(t)
    
    	d3.select("rect")
      	.attr("width", num)
        
      d3.select("text")
      	.attr("x", num)
      	.text(Math.floor(num))
    }
  })