d3.layout.pack()

打包图用于表示包含与被包含的关系，也可表示各对象的权重，通常用一圆套一圆来表示前者，用圆的大小来表示后者。

打包图(Pack)的API说明

pack.children - 取得或设置子节点的访问器。pack.links - 计算树节点中的父子链接。pack.nodes - 计算包布局并返回节点数组。pack.padding - 指定布局间距（以像素为单位）pack.radius - 指定节点半径（不是由值派生来的）pack.size - 指定布局尺寸。pack.sort - 控制兄弟节点的遍历顺序。pack.value - 取得或设置用于圆尺寸的值访问器。pack - pack.nodes的别名。

我们通过一个制作一个打包图来讲解打包布局。

1. 数据

var dataset = { "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": "哈密"}] } ] }

2. 数据转换

var width = 500; var height = 500; var pack = d3.layout.pack() .size([width, height]) .radius(20); var nodes = pack.nodes(dataset); var links = pack.links(nodes);

分别将数据转换成了结点 nodes 和 连线 links。这里只需要用到结点数据，数据被转换成了如下：

3. 绘制图形

生成SVG容器

var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(0,0)");

生成打包圆形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)"); });

生成节点文本

svg.selectAll("text") .data(nodes) .enter() .append("text") .attr("font-size", "10px") .attr("fill", "white") .attr("fill-opacity", function(d) { if (d.depth == 2) return "0.9"; else return "0"; }) .attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }) .attr("dx", -12) .attr("dy", 1) .text(function(d) { return d.name; });

查看在线演示