Reuse Animations in D3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .block, #block {
      background: lightgray;
      border: 1px solid black;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div id="block"></div>
  <div class="block a">a</div>
  <div class="block b">b</div>
  
  <button onclick="go()">Go</button>
  <button onclick="goNow()">Go now</button>
  
  <script>
    function configure(t, delay, duration) {
      return t.delay(delay)
        			.ease(d3.easeBounceOut)
        			.duration(duration);
    }
    
    function go() {
      var t = d3.transition()
      	.delay(1000)
      	.ease(d3.easeBounceOut)
      	.duration(1000)
      
      d3.selectAll('.block')
      	.transition(t)
      	.style('width', '300px')
      
      d3.select('.a')
      	.transition(t)
      	.style('background-color', 'orange')
      
      d3.select('.b')
      	.transition(t)
      	.style('background-color', 'steelblue')
    }
    
    function goNow() {
      d3.selectAll('.block')
      	.transition()
      	.call(configure, 1000, 1000)
      	.style('height', '300px')
      	.style('width', '400px')
        .style('background-color', 'purple')
    }
    
// 	d3.select('#block')
//   	.transition()
//   		.duration(500)
//   		.delay(250)
//   		.ease(d3.easeBounceOut)
//   		.style('width', '400px')
//   	.transition()
//   		.duration(500)
//   		.ease(d3.easeBounceOut)
//   		.style('height', '600px')
//   	.transition()
//   		.duration(2000)
//   		.ease(d3.easeQuadOut)
//   		.style('background-color', 'purple')

</script>
</body>

https://d3js.org/d3.v4.min.js