D3实现TREE树状图

最新推荐文章于 2025-06-14 16:20:26 发布

原创最新推荐文章于 2025-06-14 16:20:26 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#D3 #数据可视化

Web前端-数据可视化同时被 3 个专栏收录

6 篇文章

订阅专栏

Web前端-HTML

5 篇文章

订阅专栏

Web前端-CSS

5 篇文章

订阅专栏

<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 = 500,
height = 500;

var tree = d3.layout.tree()
	.size([width, height-200])
	.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });

var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(40,0)");



d3.json("city_tree.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>