<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形图（集群图）</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg{
display: block;
width: 1000px;
height: 800px;
margin: 100px auto;
}
path.link{
stroke: #333;
stroke-width: 1.5px;
fill:transparent;
}
.node circle{
fill:#fff;
stroke:steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<!--数据一共3级-->
<svg></svg>
</body>
</html>
<script> var tree = d3.layout.tree()
.size([600, 400])//设定尺寸，即转换后的各个节点的坐标在哪一个范围内；
.separation(function (a, b) {//设置节点之间的间隔；
return (a.parent == b.parent ? 1 : 2)
});
// 转换数据
d3.json('tree.json',function (error,root) {//root是读入的数据；
var nodes = tree.nodes(root);
var links = tree.links(nodes);
console.log(nodes)//nodes中有各个节点的子节点（children）,深度（depth),名称（name).位置（x,y)信息；其中name是json文件中的属性
console.log(links)//links中有连线两端（source,target)的节点信息；
// 绘制
// d3.svg.diagonal()是一个对角线生成器，只要输入两个顶点坐标，即可生成一条贝塞尔曲线
// 创建一个对角线生成器
var diagonal = d3.svg.diagonal()
.projection(function(d){return [d.y,d.x]})//projection()是一个点变换器，默认是【d.x,d.y】，即保持原坐标不变，如果写成 [ d.y , d.x ] ，即是说对任意输入的顶点，都交换 x 和 y 坐标。
var svg = d3.select('svg')
.append('g')//不加这个g的时候，中国两个字出不来；
.attr("transform", "translate(140,0)");
// 绘制连线方法
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>