d3v4 sankey

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-drag.v1.min.js"></script>
  <script src="https://unpkg.com/d3-sankey@0.4.1"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .node rect {cursor: move;fill-opacity: .9;shape-rendering: crispEdges;}
    .node text {pointer-events: none;text-shadow: 0 1px 0 #fff;}
    .link {fill: none;stroke: blue;stroke-opacity: .2;}
    .link_opacitize {fill: none;stroke: red;stroke-opacity: 1}
    .link:hover {stroke-opacity: .5;}
  </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", 500)

svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .style("font-size", 36)
      .style("font-family", "monospace")
		
      var margin = {
        top: 20,
        right: 1,
        bottom: 20,
        left: 1
      },
      width = 1100 - margin.left - margin.right,
      height = 700 - margin.top - margin.bottom,
      padding = 38,
      nodeWidth = 25,
      layout = 100,
      lowopacity= 0.3,
      highopacity = 0.7;
      
      svg.append("rect")
        .attr("x",0)
        .attr("y",0)
        .attr("width","100%")
        .attr("height","100%")
        .attr("fill","white");
      svg=svg
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");
      
      svg.selectAll("g").remove();
      
      var sankey = d3.sankey()
        .nodeWidth(nodeWidth)
        .nodePadding(padding)
        .size([width, height]);

var formatNumber = d3.format(",.0%"),
        	format = function(d) {
          	return formatNumber(d);
        	},
        	color = d3.scaleLinear(d3.schemeCategory20);

var path = sankey.link();

d3.json("data.json", function(data) {
      let links = data.sankey.links;
      let goodNodes = data.sankey.nodes.filter((node) => {
            return !!node.name;
          });
      let nodes = goodNodes;
    
      sankey
        .nodes(nodes)
        .links(links)
        .layout(layout);

node.append("rect")
	      .attr("height", function(d) { return d.dy; })
	      .attr("width", sankey.nodeWidth())
//       		.style("fill", function(d) {
//       			return d.color = color(d.name.replace(/ .*/, ""));
//     			})		
	        .style("fill", '#384650')
	        .style("fill-opacity", ".9")
          .style("shape-rendering", "crispEdges")
	       .style("stroke", function(d) { return d3.rgb(d.color).darker(1.6); })
	      .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.node + '(' + d.name + ')';
        })
        .filter(function(d) {
          return d.x < width / 2;
        })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");

function dragmove(d) {
        d3.select(this).attr("transform",
        "translate(" + (
          d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))) + "," + (
          d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
        sankey.relayout();
        link.attr("d", path);
      }
    });

function highlight_node_links(node,i){
    console.log('clicked!', node.id);
  	var remainingNodes=[],
      	nextNodes=[];

var stroke_opacity = 0;
    if( d3.select(this).attr("data-clicked") == "1" ){
      d3.select(this).attr("data-clicked","0");
      stroke_opacity = 0.1;
    }else{
      d3.select(this).attr("data-clicked","1");
      stroke_opacity = 0.5;
    }

// these settings change the path selection
    var traverse = [{
                      linkType : "sourceLinks",
                      nodeType : "target"
                    }
                    // ,{
                    //   linkType : "targetLinks",
                    //   nodeType : "source"
                    // }
                    ];

// traverse.forEach(function(step){
    //   console.log('1st step: ', step);
    //   console.log('1st node: ', node, node.id);

// }

traverse.forEach(function(step){
    node[step.linkType].forEach(function(link) {
      remainingNodes.push(link[step.nodeType]);
      highlight_link(link.id, stroke_opacity);
    });

while (remainingNodes.length) {
      nextNodes = [];
      remainingNodes.forEach(function(node) {
        console.log('remainingNodes: ', remainingNodes);
        console.log('1st node: ', node);
        node[step.linkType].forEach(function(link) {
          nextNodes.push(link[step.nodeType]);
          console.log('nextNodes: ', nextNodes);
          highlight_link(link.id, stroke_opacity);
        });
      });
      remainingNodes = nextNodes;
    }
  });
}

function highlight_links(link,i){
  	console.log('highlight paths clicked!', this, link, i);
    var remainingNodes=[],
        nextNodes=[];

highlight_link(link.id, 1);

if(link.target.sourceLinks.filter((obj) => obj.rank === link.rank)) {
      highlight_links(link.target.sourceLinks.filter((obj) => obj.rank === link.rank)[0], 0);
      return;
    } else {
      return;
    }
  
  }
  
  function highlight_path(id,opacity){
      d3.select("#link-"+id).style("stroke-opacity", opacity);
  }
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-drag.v1.min.js

https://unpkg.com/d3-sankey@0.4.1