D3 Examples - Concurrent Transitions

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    const steel_blue = "rgb(70, 130, 180)"
    
    function changeColor(circle) {
      const src_color = circle.attr("fill")
      const dst_color = src_color == "steelblue" || src_color == steel_blue ? "red" : "steelblue"
      
      d3.select(colorLock)
        .transition()
        .duration(2500)
        .tween("attr:transform", function() {
          var i = d3.interpolateRgb(src_color, dst_color);
          return function(t) { circle.attr("fill", i(t)); };
        });
    }
     
    function grow(circle) {
      circle.transition()
        .duration(3000).ease(d3.easeQuadOut)
        .attr("r", 20)
        .on("end", function () { d3.select(this).call(shrink); });
    }
    
    function shrink(circle) {
      circle.transition()
        .duration(2000).ease(d3.easeQuadOut)
        .attr("r", 10)
        .on("end", function () { d3.select(this).call(grow); });
    }
    
    const width = 960;
    const height = 500;
    
    const svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    
    const colorLock = {}
    
    svg.append("circle")
        .attr("class", "arc")
        .attr("cx", width / 2)
        .attr("cy", height / 2)
      .attr("r", 10)
      .attr("fill", "steelblue")
        .call(grow)
        .on("click", function() {
        d3.select(this).call(changeColor)
        });
​
  </script>
</body>
​
    