D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
musiciancodes
Full window
Github gist
hierarchy
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; } .node { fill: steelblue; stroke: none; } .link { fill: none; stroke: #ccc; stroke-width: 1px; } </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) var nodes = svg.append("g") .classed("nodes", true); var links = svg.append("g") .classed("links", true); var newData = [{"parent": "A", "name": "B"}, {"parent": "A", "name": "C"}, {"parent": null, "name": "A"}, {"parent": "B", "name": "D"}, {"parent": "B", "name": "E"}] var root = d3.stratify() .id(function(d){return d.name;}) .parentId(function(d){return d.parent;}) (newData); var treeLayout = d3.tree(); treeLayout.size([960, 500]); treeLayout(root); // Nodes nodes .selectAll('circle.node') .data(root.descendants()) .enter() .append('circle') .classed('node', true) .attr('cx', function(d) {return d.x;}) .attr('cy', function(d) {return d.y;}) .attr('r', 4); // Links links .selectAll('line.link') .data(root.links()) .enter() .append('line') .classed('link', true) .attr('x1', function(d) {return d.source.x;}) .attr('y1', function(d) {return d.source.y;}) .attr('x2', function(d) {return d.target.x;}) .attr('y2', function(d) {return d.target.y;}); </script> </body>
https://d3js.org/d3.v4.min.js