d3.js——树状图的绘制
树状图和集群图其实差不多，就一点点不一样，见下图：
图（1）：集群图——d3.layout.cluster()
图（2）：树状图——d3.layout.tree()
这样一来差别就看出来了。由于两者的代码差不多，这里就直接附上树状图源码，不多加解释咯~
city.json文件：
{
"name":"中国",
"children":
[
{
"name":"浙江" ,
"children":
[
{"name":"杭州" },
{"name":"宁波" },
{"name":"温州" },
{"name":"绍兴" }
]
},
{
"name":"广西" ,
"children":
[
{
"name":"桂林",
"children":
[
{"name":"秀峰区"},
{"name":"叠彩区"},
{"name":"象山区"},
{"name":"七星区"}
]
},
{"name":"南宁"},
{"name":"柳州"},
{"name":"防城港"}
]
},
{
"name":"黑龙江",
"children":
[
{"name":"哈尔滨"},
{"name":"齐齐哈尔"},
{"name":"牡丹江"},
{"name":"大庆"}
]
},
{
"name":"新疆" ,
"children":
[
{"name":"乌鲁木齐"},
{"name":"克拉玛依"},
{"name":"吐鲁番"},
{"name":"哈密"}
]
}
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树状图</title>
</head>
<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>
<body>
<script src="d3.js"></script>
<script src="js/tree.js"></script>
</body>
</html>
var width = 500,
height = 500;
//定义数据转换函数
var tree = d3.layout.tree()
.size([width,height-200])
//定义对角线生成器diagonal
var diagonal = d3.svg.diagonal()
.projection(function(d){return [d.y, d.x]})
//定义svg
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.append("g")
.attr("transform","translate(40,0)")
//读取json文件，进行绘图
d3.json("city.json",function(erro,root){
var nodes = tree.nodes(root);
var links = tree.links(nodes);
//画点
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})
//画线
var line = svg.selectAll("link")
.data(links)
.enter()
.append("path")
.attr("class","link")
.attr("d",diagonal)
})