如何使用d3.js获取垂直方向的树
Sai*_*ran 7 javascript svg d3.js
以下url将获得水平方向的树.但是我的要求是使用d3获得垂直方向的树.请为此要求建议正确的有效解决方案.
将第 35 行、第 56 行和肘部函数更改为
\n\n <!DOCTYPE html>\n<meta charset="utf-8">\n<style>\ntext {\n font-family: "Helvetica Neue", Helvetica, sans-serif;\n}\n\n.name {\n font-weight: bold;\n}\n\n.about {\n fill: #777;\n font-size: smaller;\n}\n\n.link {\n fill: none;\n stroke: #000;\n shape-rendering: crispEdges;\n}\n\n</style>\n<body>\n<script src="http://d3js.org/d3.v2.min.js?2.9.4"></script>\n<script>\n\nvar margin = {top: 0, right: 0, bottom: 320, left: 0},\n width = 960- margin.left - margin.right,\n height = 500 - margin.top - margin.bottom;\n\nvar tree = d3.layout.tree()\n .separation(function(a, b) { return a.parent === b.parent ? 1 : .5; })\n .children(function(d) { return d.parents; })\n .size([width, height]);\n\nvar svg = d3.select("body").append("svg")\n .attr("width", width + margin.left + margin.right)\n .attr("height", height + margin.top + margin.bottom)\n .append("g")\n .attr("transform", "translate(" + margin.left + "," + margin.top + ")");\n\nd3.json("tree.json", function(json) {\n var nodes = tree.nodes(json);\n\n var link = svg.selectAll(".link")\n .data(tree.links(nodes))\n .enter().append("path")\n .attr("class", "link")\n .attr("d", elbow);\n\n var node = svg.selectAll(".node")\n .data(nodes)\n .enter().append("g")\n .attr("class", "node")\n .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })\n\n node.append("text")\n .attr("class", "name")\n .attr("x", 8)\n .attr("y", -6)\n .text(function(d) { return d.name; });\n\n node.append("text")\n .attr("x", 8)\n .attr("y", 8)\n .attr("dy", ".71em")\n .attr("class", "about lifespan")\n .text(function(d) { return d.born + "\xe2\x80\x93" + d.died; });\n\n node.append("text")\n .attr("x", 8)\n .attr("y", 8)\n .attr("dy", "1.86em")\n .attr("class", "about location")\n .text(function(d) { return d.location; });\n});\n\nfunction elbow(d, i) {\n\n console.log(d)\n return "M" + d.source.x + "," + d.source.y\n + "V" + d.target.y + "H" + d.target.x \n + (d.target.children ? "" : ("v" + margin.bottom))\n}\n\n</script>\n</body>\n这是我的结果
| 归档时间： |
|
| 查看次数： |
6799 次 |
| 最近记录： |