Best IT Recipes

How to get a vertically oriented tree using d3.js

The following url is going to get a horizontally oriented tree. However, my requirement is to get a vertically oriented tree using d3. Please suggest the correct and correct solution for this requirement.

d3js tree area enter image description here

+5
javascript svg
Oct 18 '13 at 7:47
source share
2 answers

I know that some time has passed since you asked this question, but just in case, I would like to bring to your attention the diagram that I made:

enter image description here

Code in codepen . If you have any questions regarding the code, please let me know.

+6
Dec 28 '13 at 1:38
source share

change line 35, line 56 and the elbow function to

<!DOCTYPE html> <meta charset="utf-8"> <style> text { font-family: "Helvetica Neue", Helvetica, sans-serif; } .name { font-weight: bold; } .about { fill: #777; font-size: smaller; } .link { fill: none; stroke: #000; shape-rendering: crispEdges; } </style> <body> <script src="http://d3js.org/d3.v2.min.js?2.9.4"></script> <script> var margin = {top: 0, right: 0, bottom: 320, left: 0}, width = 960- margin.left - margin.right, height = 500 - margin.top - margin.bottom; var tree = d3.layout.tree() .separation(function(a, b) { return a.parent === b.parent ? 1 : .5; }) .children(function(d) { return d.parents; }) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.json("tree.json", function(json) { var nodes = tree.nodes(json); var link = svg.selectAll(".link") .data(tree.links(nodes)) .enter().append("path") .attr("class", "link") .attr("d", elbow); var node = svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }) node.append("text") .attr("class", "name") .attr("x", 8) .attr("y", -6) .text(function(d) { return d.name; }); node.append("text") .attr("x", 8) .attr("y", 8) .attr("dy", ".71em") .attr("class", "about lifespan") .text(function(d) { return d.born + "–" + d.died; }); node.append("text") .attr("x", 8) .attr("y", 8) .attr("dy", "1.86em") .attr("class", "about location") .text(function(d) { return d.location; }); }); function elbow(d, i) { console.log(d) return "M" + d.source.x + "," + d.source.y + "V" + d.target.y + "H" + d.target.x + (d.target.children ? "" : ("v" + margin.bottom)) } </script> </body>

this is my result enter image description here

+2
Oct 18 '13 at 8:53 on
source share


More articles:


All Articles