D3 Examples - Sankey with Minard labels on the links

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
​
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="d3-sankey-circular.js"></script>
  <script src="d3-path-arrows.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="example-data.js"></script>
​
  <link href="https://fonts.googleapis.com/css?family=Quintessential" rel="stylesheet">
​
  <title>Sankey with circular links</title>
  <style>
    body {
      font-family: 'Quintessential', sans-serif;
      background: #E0E4D5
    }
​
    rect {
      shape-rendering: crispEdges;
    }
​
    text {
      font-size: 12px;
      font-family: Quintessential;
    }
​
    .link {
      fill: none;
    }
  </style>
</head>
​
<body>
​
  <h1>Sankey with circular links</h1>
​
  <div id="chart"></div>
​
  <script>
    var margin = { top: 10, right: 10, bottom: 10, left: 120 };
    var width = 1000;
    var height = 700;
​
    let data = data5;
​
    const nodePadding = 40;
​
    const circularLinkGap = 2;
​
    var sankey = d3.sankeyCircular()
      .nodeWidth(10)
      .nodePadding(nodePadding)
      .nodePaddingRatio(0.1)
      .size([width, height])
      .nodeId(function (d) {
        return d.name;
      })
      .nodeAlign(d3.sankeyRight)
      .iterations(32);
​
    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);
​
    var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
​
    var linkG = g.append("g")
      .attr("class", "links")
      .attr("fill", "none")
      .selectAll("path");
    
    var linkLabels = g.append("g")
​
    var nodeG = g.append("g")
      .attr("class", "nodes")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .selectAll("g");
​
    //run the Sankey + circular over the data
    let sankeyData = sankey(data);
    let sankeyNodes = sankeyData.nodes;
    let sankeyLinks = sankeyData.links;
​
    let depthExtent = d3.extent(sankeyNodes, function (d) { return d.depth; });
​
    var nodeColour = d3.scaleSequential(d3.interpolateCool)
    .domain([0,width]);
​
    //Adjust link Y coordinates based on target/source Y positions
​
    var node = nodeG.data(sankeyNodes)
      .enter()
      .append("g");
​
    node.append("rect")
      .attr("x", function (d) { return d.x0; })
      .attr("y", function (d) { return d.y0; })
      .attr("height", function (d) { return d.y1 - d.y0; })
      .attr("width", function (d) { return d.x1 - d.x0; })
      .style("fill", "#C89776")
      //.style("fill", "black")
      //.style("stroke", "black")
      
​
    node.append("text")
      .attr("x", function (d) { return (d.x0 + d.x1) / 2; })
      .attr("y", function (d) { return d.y0 - 12; })
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function (d) { return d.name; });
​
    node.append("title")
      .text(function (d) { return d.name + "\n" + (d.value); });
​
    var link = linkG.data(sankeyLinks)
      .enter()
      .append("g")
    
    link.append("path") 
      .attr("class", "sankey-link")
      .attr("d", function(link){
        return link.path;
      })
      .style("stroke-width", function (d) { return d.width; })
      .style("opacity", 1)
      .style("stroke", "#9f987d")
    
    link.append("path") 
      .attr("class", "sankey-link")
      .attr("d", function(link){
        return link.path;
      })
      .style("stroke-width", function (d) { return d.width - 2; })
      .style("opacity", 1)
      .style("stroke", function(d){
        return d.circular ? "DFBD80" : "#BAB5A1"
    })
        .each(addMinardLabels);
    
    
    let arrows = pathArrows()
        .arrowLength(10)
        .gapLength(90)
        .arrowHeadSize(4)
        .path(function(link){ return link.path })
​
         var arrowsG = linkG.data(sankeyLinks)
      .enter()
      .append("g")
      .attr("class", "g-arrow")
      .call(arrows)
    
    
    link.append("title")
      .text(function (d) {
        return d.source.name + " → " + d.target.name + "\n Index: " + (d.index);
      });  
    
    
    function addMinardLabels (link) {
      
      const gap = 50;
      let label = link.value
      
      var linkLength = this.getTotalLength();
      
      let n = Math.floor(linkLength/gap)
      
      for (var i = 1; i < n; i++) {
        
        let thisLength = (i * gap) - 10
        
        let position = this.getPointAtLength(thisLength) 
        let positionPlueOne = this.getPointAtLength(thisLength + 5) 
        
        let adj = positionPlueOne.x - position.x;
        let opp = position.y - positionPlueOne.y;
        let angle = Math.atan(opp/adj) * (180 / Math.PI );
        let rotation = 270 - angle; 
        
        linkLabels.append("text")
            .attr("class", "link-label")
            .text(label)
            .attr("x", position.x)
            .attr("y", position.y)
            .attr("dy", "0.35em")
            .style("fill", "black")
            .style("text-anchor", "middle")
            .attr("transform", "rotate(" + rotation + ","+ position.x + "," + position.y + ")")
        
      }
     
    }
​
    
​
    
  </script>
</body>
​
</html>
    