Question

下图采用包含（嵌套）来展现层级结构。每一个叶子节点的大小都显示了每个数据点数量的大小。如图所示，通过小圈的大小累积逐渐接近于一个大圈，但要注意的是，由于空间上的浪费，在层级之间也会存在一些失真，但只要叶子节点可以精确的比较就行。尽管圆形填充没有像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