1.diagonal生成器
diagonal生成器是路径生成器的一种，需要的数据形式是
var data = [
{A:{x:100,y:100},
B:{x:200,y:200}},
{A:{x:200,y:200},
B:{x:300,y:100}},
];上边的相当于一条diagonal线条，通过source和target访问器我们可以深入到内部，灵活指定x，y的坐标
var diagnal = d3.svg.diagonal()
.source(function(d,i){ //自定义访问器函数，但其实我们一般在数据中target source
return d.A;
})
.target(function(d,i){
return d.B;
});2.cluster布局
cluster布局，pie布局，chord布局他们的作用一样，我们用布局将数据包裹，会生成线生成器所需要的数据
//root是传进来的数据
var nodes = cluster.nodes(root); //生成节点对象
var links = cluster.links(nodes);//连线对象
console.log(nodes);
console.log(links);
nodes
links
nodes字典中有children，depth，name，x，y，5个一级属性，在children字段内还有二级属性，指出了children都有哪些结点
links字典中，source与target为他的一级属性，source中种属性与上边每个nondes的字段一样，因为每个source也是一个点。
最后，有了source与target就有了diagonal路径生成器所需要的数据，就可以生成diagonal线条了。而nodes中有x，y坐标我们就可以将数据绑定在circl上了，设定circle的坐标大小等等。
—-读取文件数据格式：
{
"name":"中国",
"children":
[
{
"name":"浙江" ,
"children":
[
{"name":"杭州" },
{"name":"宁波" },
{"name":"温州" },
{"name":"绍兴" }
]
},
{
"name":"广西" ,
"children":
[
{"name":"桂林"},
{"name":"南宁"},
{"name":"柳州"},
{"name":"防城港"}
]
},
{
"name":"黑龙江",
"children":
[
{"name":"哈尔滨"},
{"name":"齐齐哈尔"},
{"name":"牡丹江"},
{"name":"大庆"}
]
},
{
"name":"新疆" ,
"children":
[
{"name":"乌鲁木齐"},
{"name":"克拉玛依"},
{"name":"吐鲁番"},
{"name":"哈密"}
]
}
]
}3.完整代码
<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 cluster = d3.layout.cluster()
.size([width, height - 200]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; })
// .source(function(d,i){
// return [d.source.y,d.source.x];
// })
// .target(function(d,i){
// return [d.target.y,d.target.x];
// })
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)");
d3.json("city.json", function(error, root) {
var nodes = cluster.nodes(root); //生成节点对象
var links = cluster.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>最后效果：
