D3 Examples - sankey with animated links

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
​
  <style>
    body {
      font-family: Helvetica, Arial;
    }
   
    #chart {
      height: 500px;
      font-size: 11px;
      width: 960px;
      margin: auto;
    }
​
    rect {
      shape-rendering: crispEdges;
      fill: grey;
      stroke: white;
      stroke-width: 2px;
    }
​
​
    path {
      fill: none;
      opacity: 0.5;
    }
​
​
    h1 {
      font-size: 1.4rem;
    }
​
  </style>
​
</head>
​
<body>
  
  <!---
  <button type="button" onclick="allAnimate()">Animate</button>
    --->
​
  <div id="chart" />
  
​
  <script src="sankey.js"></script>
  <script>
    var margin = {
        top: 1,
        right: 1,
        bottom: 6,
        left: 1
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
​
    var formatNumber = d3.format(",.0f"),
      format = function(d) {
        return formatNumber(d) + " TWh";
      }
​
    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    var sankey = d3.sankey()
      .nodeWidth(15)
      .nodePadding(10)
      .size([width, height]);
​
    var path = sankey.link();
​
    d3.json("energy.json", function(energy) {
​
      sankey
        .nodes(energy.nodes)
        .links(energy.links)
        .layout(32);
      
      var bkdLink = svg.append("g").selectAll(".link")
        .data(energy.links)
        .enter().append("path")
        .attr("class", "bkd-link")
        .attr("d", path)
        .style("opacity", 0.1)
        .style("stroke", "lightgrey")
        .style("stroke-width", function(d) {
          return Math.max(1, d.dy);
        })
        .sort(function(a, b) {
          return b.dy - a.dy;
        });
​
      var link = svg.append("g").selectAll(".link")
        .data(energy.links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", path)
        .style("stroke", "lightgrey")
        .style("stroke-width", function(d) {
          return Math.max(1, d.dy);
        })
        .sort(function(a, b) {
          return b.dy - a.dy;
        });
      
​
       link.each(function(d) {
              setDash.call(this, d);
            });
​
      
      function setDash(d) {
        var d3this = d3.select(this);
        //var totalLength = d3this.node().getTotalLength();
        d.totalLength = d3this.node().getTotalLength();
        d3this
          .attr('stroke-dasharray', d.totalLength + ' ' + d.totalLength)
          .attr('stroke-dashoffset', d.totalLength)
      }
​
      link.append("title")
        .text(function(d) {
          return d.source.name + " → " + d.target.name + "\n" + format(d.value);
        });
​
      var node = svg.append("g").selectAll(".node")
        .data(energy.nodes)
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
          return "translate(" + d.x + "," + (d.y - 2) + ")";
        })
​
        
      node.append("rect")
        .attr("height", function(d) {
          return d.dy + 4;
        })
        .attr("width", sankey.nodeWidth())
        .style('opacity', 0.2)
        .on("click", function(d){
            svg.selectAll(".link")
            .attr('stroke-dashoffset', function(d){
              return d.totalLength
            });
                branchAnimate(d)
        })
        .append("title")
        .text(function(d) {
          return d.name + "\n" + format(d.value);
        })
        
​
      node.append("text")
        .attr("x", -6)
        .attr("y", function(d) {
          return d.dy / 2;
        })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) {
          return d.name;
        })
        .style("opacity", 0.6)
        .filter(function(d) {
          return d.x < width / 2;
        })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");
    });
    
    
    let scale = 5
    
    function allAnimate() {
        
      d3.selectAll(".link")
          .transition()
            .delay(function(d){
            let del = d.source.x * scale
            //console.log("del: " + del)
            return del
            })
          .duration(function(d){
            let dur = (d.target.x - d.source.x) * scale
            //console.log("dur: " + dur)
            return dur
            })
            .ease(d3.easeLinear)
          .attr('stroke-dashoffset', 0)
        
        d3.selectAll("rect/*, text*/")
          .transition()
            .delay(function(d){
            let del = (d.x * scale) - 250
            //console.log("del: " + del)
            return del
            })
          .duration(500)
          .style('opacity', 1)
      }
    
    
    function branchAnimate(nodeData) {
      
        var links = svg.selectAll(".link")
            .filter(function(d) {
            return nodeData.sourceLinks.indexOf(d) > -1
          });
       
            var nextLayerNodeData = [];
        
            links.each(function(d) {
          nextLayerNodeData.push(d.target);
        });
      
        links
          .transition()
          .duration(function(d){
            let dur = (d.target.x - d.source.x) * scale
            return dur
            })
          .ease(d3.easeLinear)
          .attr('stroke-dashoffset', 0)
          .on("end", function() {
            nextLayerNodeData.forEach(function(d) {
              branchAnimate(d);
            });
          });
      }
    
    
  </script>
​
</body>
​
</html>
​
    