D3 Examples - transition chaining

xxxxxxxxxx
 
<!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; }
    div {
      margin: 80px;
    }
  </style>
</head>
​
<body>
<script type="text/javascript">
    var body = d3.select("body");
        
    function teleport(s){
        s.transition().duration(1000) 
            .style("width", "200px")
            .style("height", "1px")
        .transition().duration(500) 
            .style("left", "400px")
        .transition().duration(1000) 
            .style("left", "600px")
            .style("height", "80px")
            .style("width", "80px");
    }
    
    body.append("div")    
            .style("position", "fixed")
            .style("background-color", "steelblue")
            .style("left", "10px")
            .style("width", "80px")
            .style("height", "80px")
            .call(teleport);    
</script>
</body>
​
    