包布局
最后更新于：2022-04-01 11:11:56
> [Wiki](Home) ▸ [[API--中文手册]] ▸ [[布局]] ▸ **包布局**
* 如发现翻译不当或有其他问题可以通过以下方式联系译者:
* 邮箱：zhang_tianxu@sina.com
* QQ群：[D3数据可视化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大数据可视化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
下图采用包含（嵌套）来展现层级结构。每一个叶子节点的大小都显示了每个数据点数量的大小。如图所示，通过小圈的大小累积逐渐接近于一个大圈，但要注意的是，由于空间上的浪费，在层级之间也会存在一些失真，但只要叶子节点可以精确的比较就行。尽管圆形填充没有像treemap那样，高效率的使用了空间，空间上的浪费反而清晰地展现了分层效果。
通过展开层级，pack layout 也可以被用来创建bubble charts（气泡图表）。
和D3中其他类相似，layout中的布局遵循方法链模式，其中setter方法返回布局本身，并允许在一个简单语句中调用多个setter方法。
# d3.layout.pack()
使用默认设置创建一个新的包布局，默认的排序顺序是按值升序排序；默认的子访问器，假设每一个输入数据都是一个带有子数组的对象，默认的大小是1×1。
# pack(root)
# pack.nodes(root)
运行包布局，返回与指定根节点root相关联的节点的数组。簇布局是D3家族分层布局中的一部分。这些布局遵循相同的基本结构：将输入参数传递给布局是层次的根节点root ，输出的返回值是一个代表所有节点计算出的位置的数组。每个节点上填充以下几个属性：
• parent – 父节点，或根节点为null。
• children – 子节点数组，或叶子节点为null。
• value –节点的值，作为访问器返回的值。
• depth –节点的深度，根节点从0开始。
• x –计算的节点位置的x坐标。
• y –计算的节点位置的y坐标。
• r – 计算的节点半径。
# pack.links(nodes)
给定一个特定节点的数组nodes，例如由节点返回的，返回表示每个节点的从父母到孩子链接的对象数组。而叶子节点将不会有任何的链接。每个链接都是一个对象，且具有两个属性：
• source –父节点（正如上述描述的那样）。
• target –子节点。
此方法检索一组适合展示的链接描述很有用，通常与对角线形状发生器一起用。例如：
svg.selectAll("path")
.data(cluster.links(nodes))
.enter().append("path")
.attr("d", d3.svg.diagonal());
# pack.children([children])
如果指定children 参数，则设置特定的孩子访问器函数。如果children没有指定，则返回当前孩子访问函数，默认假定输入的数据是一个带有孩子数组的对象：
function children(d) {
return d.children;
}
通常情况下，可以使用d3.json很方便加载节点层次结构，代表输入层次结构的嵌套JSON对象。例如：
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
{"name": "MergeEdge", "size": 743}
]
},
{
"name": "graph",
"children": [
{"name": "BetweennessCentrality", "size": 3534},
{"name": "LinkDistance", "size": 5731}
]
}
]
}
]
}
孩子的访问器是第一次被层次中的根节点调用。如果存取器返回null，则该节点被假定为叶节点并且布局遍历终止。否则，访问器应返回表示子节点的数据元素的数组。
# pack.sort([comparator])
如果comparator 比较器指定了，则使用特定的比较器函数，设置同级节点布局的排序顺序。如果comparator 没有指定，则返回当前组排序顺序，默认为升序排列，按通过相关的输入数据的数值属性来排序：
function comparator(a, b) {
return a.value - b.value;
}
这个比较器的函数被节点对调用，输入的数据传递给每个节点。空比较器禁止排序，使用树遍历的顺序。比较器函数也可以使用d3.ascending或d3.descending来实现排序。
# pack.value([value])
如果value 值指定了，则设置值访问器为指定的函数。如果value 值未指定，则返回当前的值访问器，其中假定输入数据是一个带有一个数字值属性的对象：
function value(d) {
return d.value;
}
对每一个输入的数据元素调用值访问器，并且必须返回一个数字，来表示该节点的数值。此值被用来按比例设置每个圆的面积为value。但是请注意，圆圈大小是严格地只在叶节点之间才存在可比性；内部的节点无法准确地比较，因为在打包子圆圈和他们父母之间还留有空白。
# pack.size([size])
如果指定了大小size，则设定可用的布局大小为指定的表示x和y的二元数组。如果size 大小没有指定，则返回当前大小，默认为1×1。
# pack.radius([radius])
如果指定了半径radius，则设置半径的函数，用于计算每个节点的半径。如果半径radius为空，因为默认情况下，半径自动从节点值确定，且调整为适合的布局大小。如果半径radius未指定，则返回当前的半径函数，默认为null。此半径radius 也可为均匀的圆大小指定为一个恒定数目。
# pack.padding([padding])
如果指定padding ，则设置相邻圈之间的大概填充，以像素为单位。如果没有指定padding ，则返回当前的填充，默认为0。
* 何凯琳译 2014-12-01
* gulu校对2014-12-6 21:32:15