How to get the vertically-oriented tree using d3.j

2019-02-07 07:12发布

站内问答 / JavaScript
1849 2 4

The following url is going to get horizontally-oriented tree. My requirement is however to get a vertically-oriented tree using d3. Please suggest a proper valid solution for this requirement.

d3js Tree square enter image description here

2条回答
SAY GOODBYE
2楼-- · 2019-02-07 07:26

change line 35, line 56 and 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(" + d.x + "," + d.y + ")"; })

  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 my resultenter image description here

查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
3楼-- · 2019-02-07 07:41

I know its been a while since you asked the question, but just in case I would like to bring to your attention a diagram that I made:

enter image description here

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)