D3 Examples - path sankey :p

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 900)
​
    let graph1 = [{source: {x:46, y:127}, target: {x: 200, y: 400}, l: 20},
                 {source: {x:50, y:50}, target: {x: 300, y: 400},l: 20}];
    
    // data
    let data1 = { m: {t1:25, t2:10,  t3:2}, n:{t1: 5, t2: 1,  t3:4}, q: {t1:53, t2:10,  t3:10} };
    
    let data2 = { m: {t1:1, t2:6,  t3:2}, n:{t1: 15, t2: 1,  t3:4}, q: {t1:9, t2:10,  t3:10}, p: {t1:14, t2:10,  t3:2} };
    
    let colors = {m: 'red', q: 'blue', n: 'green', p: 'orange'};
   
    let max = _.max(_.flatten(_.map(_.values(data1), _.values)));
    let strokeScale = d3.scaleLinear().domain([0, max]).range([0, 20]);
    
    // data mapping
    let x = 182;  let y = 28;
    let dx = 184;  let dy = 229;
    let pad = 1;
   
    
    function generateDatum(data, x, y, dx, dy) {
      let t = dx;
        let datum = [];
        let map = {};
        _.each(data,  (v, k) => {
        
        _.each(v, (vt, kt) => {
          
            x += strokeScale(vt)/2;
            map[kt] = (map[kt]||0) + strokeScale(vt)/2;
          datum.push({
                type: k,
                source: { x: x,  y: y },
                target: { x: dx + map[kt] ,  y: dy },
                strokeWidth: strokeScale(vt),
                c: colors[k],
          });
                dx += 81;
            x += strokeScale(vt)/2 + pad;
            map[kt] +=  strokeScale(vt)/2 + pad;
        });
      
        dx = t ;
        x += 50;
        });
      
      return datum;
    }
    
    var _data1 = generateDatum(data1, x, y, dx, dy);
    
    svg.selectAll('.links')
        .data(_data1)
        .enter()
        .append('path')
        .attr('d', link)
        .style('fill', 'none')
        .style('mix-blend-mode', 'multiply')
        .style('stroke', d => d.c)
        .style('stroke-width', d => d.strokeWidth)
    
    /*
    svg.selectAll('.links')
        .data(generateDatum(data2, x, dy + dy, dx, dy+ 20))
        .enter()
        .append('path')
        .attr('d', link)
        .style('fill', 'none')
        .style('mix-blend-mode', 'multiply')
        .style('stroke', d => d.c)
        .style('stroke-width', d => d.strokeWidth)
    */
    
    
    function link(d) {
      return "M" + d.source.x + "," + d.source.y
        + "C" + d.source.x +  "," + (d.source.y + d.target.y) / 2
        + " " + d.target.x + "," + (d.source.y + d.target.y) / 2
        + " " + d.target.x + "," + d.target.y;
    }
   
​
  </script>
</body>
​
    