d3.js——矩形分区图

/**
* Created by Silence_C on 2016/5/4.
*/
var width = 600,
height =400;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.append("g");
var color = d3.scale.category20();
//数据转换
var partition = d3.layout.partition()
.sort(null)
.size([width,height])
.value(function(d){return 1})//表示分区大小的值。这里的意思是：如果数据文件中用 size 值表示结点大小，那么这里可写成 return d.size

//读取数据并绘图
d3.json("city.json",function(error,root){
if (error)  console.log(error);
console.log(root);

var nodes = partition.nodes(root),
links = partition.links(nodes);
console.log(nodes);

////开始画图
var rects = svg.selectAll("g")
.data(nodes)
.enter()
.append("g")

rects.append("rect")
.attr("x", function (d) {return d.x; })//顶点的x坐标
.attr("y",function(d){return d.y; })//顶点的y坐标
.attr("width", function (d) {return d.dx;}) //顶点的宽度dx
.attr("height",function(d){return d.dy;}) //顶点的高度dy
.style("stroke","#fff")
.style("fill",function(d){
return color((d.children ? d: d.parent).name);
})
.on("mouseover",function(d){
d3.select(this)
.style("fill","yellow")
})
.on("mouseout",function(d){
d3.select(this)
.transition()
.duration(200)
.style("fill",function(d){
return color((d.children?d: d.parent).name)

})
})
rects.append("text")
.attr("class","node_text")
.attr("transform",function(d,i){
return "translate("+( d.x+20)+","+ (d.y+20)+")"
})
.text(function (d,i) {
return d.name;
})

})