Dagre fish

<!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/dagre-d3/0.6.3/dagre-d3.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
    text {
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

.node rect {
  stroke: #333;
  fill: #fff;
  stroke-width: 1.5px;
}

.edgePath path.path {
  stroke: #333;
  fill: none;
  stroke-width: 1.5px;
  opacity: 0.7
}

.arrowhead {
 stroke: blue;
 fill: blue;
 stroke-width: 1.5px;
}
  </style>
</head>

// Create the input graph
var graph = new dagreD3.graphlib.Graph().setGraph({});
    
graph.setGraph({
    nodesep: 25,
    ranksep: 82,
    rankdir: "LR",
    marginx: 20,
    marginy: 20
  	
  });
    
let fish = [
  "Leptodora",
"Heterocope",
"Diapomus",
"Eurytemora",
"Bosmina",
"Daphnia",
"Sikloja",
"Gos",
"Nors",
"Lax",
"Cyclops",
"Bythotrephes",
"Sik",
"UNKNOWN",
"Mort",
"Pontoporeia",
"Algae",
"Gers",
"Chironomidae",
"Pallasea",
"Gammaracanthus",
"Braxen",
"Lake",
"Oligochaeta"
]

let links = [{source:'Leptodora', target:'Nors'},

{source:'Heterocope', target:'Sikloja'}, 
{source:'Heterocope', target:'Nors'}, 
{source:'Diapomus', target:'Sikloja'}, 
{source:'Eurytemora', target:'Sikloja'}, 
{source:'Bosmina', target:'Sikloja'}, 
{source:'Daphnia', target:'Sikloja'}, 
{source:'Bythotrephes', target:'Sikloja'}, 
{source:'Sikloja', target:'Gos'}, 
{source:'Sikloja', target:'Lax'}, 
{source:'Nors', target:'Gos'}, 
{source:'Nors', target:'Lax'}, 
{source:'Bythotrephes', target:'Mort'},
{source:'Bythotrephes', target:'Nors'}, 
{source:'UNKNOWN', target:'Nors'}, 
{source:'Bythotrephes', target:'Sik'}, 
{source:'Chironomidae', target:'Sik'}, 
{source:'Pontoporeia', target:'Sik'}, 
{source:'Pontoporeia', target:'Gers'}, 
{source:'Chironomidae', target:'Gers'}, 
{source:'Chironomidae', target:'Braxen'}, 
{source:'Pallasea', target:'Nors'}, 
{source:'Pallasea', target:'Lake'}, 
{source:'Pallasea', target:'Gers'},
{source:'Pallasea', target:'Braxen'}, 
{source:'Algae', target:'Braxen'}, 
{source:'Oligochaeta', target:'Braxen'}, 
{source:'Gammaracanthus', target:'Nors'}, 
{source:'Gammaracanthus', target:'Lake'}, 
{source:'Cyclops', target:'Sik'}, 
{source:'UNKNOWN', target:'Lake'}, 
{source:'Gers', target:'Lake'}, 
{source:'Nors', target:'Lake'}]

fish.forEach(function(d){
  graph.setNode(d, {});
})

graph.nodes().forEach(function(v) {
  var node = graph.node(v);
  node.rx = node.ry = 5;
});

links.forEach(function(l){
  graph.setEdge(l.source, l.target, {
    curve: d3.curveBasis, 
    minlen: 2
  });
})

// Create the renderer
var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
    inner = svg.append("g");

// Run the renderer. This is what draws the final graph.
render(inner, graph);

// Center the graph
var xCenterOffset = (svg.attr("width") - graph.graph().width) / 2;
inner.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", graph.graph().height + 40);

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.3/dagre-d3.js