我的个人博客是：www.ourd3js.com
csdn博客为：blog.csdn.net/lzhlzz
转载请注明出处，谢谢。
打包图（ Pack ）。用于包括与被包括的关系，也表示各个对象的权重，通经常使用一圆套一圆来表示前者，用圆的大小来表示后者。
先看本节所使用的数据： city2.json
这是各城市所属关系的数据。我们如今要用 D3 的 layout 来转换数据，使其easy进行可视化处理。
var pack = d3.layout.pack()
.size([ width, height ])
.radius(20);
上面定义了 pack 函数。size() 是转换后数据的尺寸，即转换后顶点的(x,y)。都会在这个 size 范围内。radius 是用于设定转换后最小的圆的半径。接下来要读取 json 文件，并将文件内容提供给 pack 函数，用于转换数据。
d3.json("city2.json", function(error, root) {
var nodes = pack.nodes(root);
var links = pack.links(nodes);
console.log(nodes);
console.log(links);
}
上面用 pack 分别将数据转换成了顶点 nodes 和 连线 links。后面两句话的 console.log 用于输出转换后的数据。我们来看看数据被转换成了什么样。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpobHp6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
上面的图片是顶点 nodes 的内容。我们能够看到。数据被转换后，多了深度信息(depth)，半径大小(r)。坐标位置(x,y)等。我没有贴 links 的图片。由于我们此节并不正确连线进行绘制。
不管用什么 layout 来转换数据，我们一定要先看看转换后的数据是什么。再进行绘制。否则非常easy出错。
我们要绘制的内容有圆和文字。都在 SVG 中绘制。
代码例如以下：
svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("fill","rgb(31, 119, 180)")
.attr("fill-opacity","0.4")
.attr("cx",function(d){
return d.x;
})
.attr("cy",function(d){
return d.y;
})
.attr("r",function(d){
return d.r;
})
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.attr("fill","rgb(31, 119, 180)");
});
这是绘制圆的代码，看过前面几节的朋友一定已经非常熟悉了吧。
结果图例如以下：
鼠标操作的内容，请点击以下的链接自己尝试：
完整的代码，右键点击浏览器查看。
版权声明：本文博客原创文章，博客，未经同意，不得转载。