D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
shivasj
Full window
Github gist
linkHorizontal
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <svg width="1200" height="700"></svg> <script> var data = [{ source: { y: 150, x: 95 }, target: { y: 200, x: 0 } }, { source: { y: 150, x: 75 }, target: { y: 0, x: 0 } }, { source: { y: 250, x: 75 }, target: { y: 150, x: 150 } }, ]; var svg = d3.select("svg"); var link = d3.linkHorizontal() .x(function(d) { return d.y; }) .y(function(d) { return d.x; }); var linkVertical = d3.linkVertical() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }); var linkRadial = d3.linkRadial() .angle(function(d) { console.log(d) return d.x; }) .radius(function(d) { return d.y; }); svg.selectAll(null) .data(data) .enter() .append("path") .attr("fill", "none") .attr("stroke", "blue") .attr("d", linkVertical); </script> </body>
https://d3js.org/d3.v4.min.js