| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <html>
- <head>
- <meta charset="utf-8">
- <title>树状图</title>
- <style>
- .node circle {
- fill: #fff;
- stroke: steelblue;
- stroke-width: 1.5px;
- }
- .node {
- font: 12px sans-serif;
- }
- .link {
- fill: none;
- stroke: #ccc;
- stroke-width: 1.5px;
- }
- </style>
- </head>
- <body>
- <script src="http://d3js.org/d3.v3.min.js"></script>
- <script>
- var width = 2000,
- height = 8000;
- var R = 600;
- var tree = d3.layout.tree()
- .size([360, 1000])
- .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });
- var diagonal = d3.svg.diagonal()
- .projection(function(d) {
- var r = d.y, a = (d.x-90) / 180 * Math.PI;
- return [r * Math.cos(a), r * Math.sin(a)];
- });
- var svg = d3.select("body").append("svg")
- .attr("width", width)
- .attr("height", height)
- .append("g")
- .attr("transform", "translate(40,0)");
- d3.json("data.json", function(error, root) {
- var nodes = tree.nodes(root);
- var links = tree.links(nodes);
- console.log(nodes);
- console.log(links);
- var link = svg.selectAll(".link")
- .data(links)
- .enter()
- .append("path")
- .attr("class", "link")
- .attr("d", diagonal);
- var node = svg.selectAll(".node")
- .data(nodes)
- .enter()
- .append("g")
- .attr("class", "node")
- .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
- node.append("circle")
- .attr("r", 4.5);
- node.append("text")
- .attr("dx", function(d) { return d.children ? -8 : 8; })
- .attr("dy", 3)
- .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
- .text(function(d) { return d.name; });
- });
- </script>
- </body>
- </html>
|
