d3.layout.pack 释义

 d3.layout.pack -API释义

pack部分官方API :https://github.com/mbostock/d3/wiki/Pack-Layout。

下图采用嵌套结构来呈现出层级结构。每个叶子节点的尺寸都是由该节点的数据量化而来。如图，大圈套小圈，经过小圈的数量累积造成了大圈的尺寸，毕竟是由数值计算而来，在这个计算过程当中。不免有小数产生的精度问题，因此圈与圈之间有些失真，但无伤大雅，由于叶子节点不是经过累积计算出的尺寸，因此对“我”（叶子节点）又有什么影响呢？相对treemap而言，尽管pack貌似浪费了空间（圈间间隙），可是结构上的分层却更加的显著，你以为呢？

 

你不说我浪费空间吗？OK!我节省下空间，经过压缩，pack将尽量的计算出有效利用面积。不过，你不以为变味了吗？看起来有点像bubble charts。

 

和D3中其余类类似，layout中的各类布局（如Pie、Force、Hierarchy等）都支持方法链式调用。下面将对你可能调用的方法作个介绍。Follow me!

#d3.laoout.pack()

建立pack布局，布局中节点默认按照升序排列，子节点和其叶子节点都经过对象表示，就比如子节点是一个电影院，其叶子节点为电影院里的观众，观众座位号码按升序排列。

#pack(root)

#pack.nodes(root)

使用pack布局，返回根节点直接子节点（仅与根节点相关联），集群布局当属分层布局的一部分。这些布局大同小异，都是从根节点切入，而后找出子节点以及叶子节点，每个节点都是个对象，是对象就有属性，这些属性也就决定了节点的性质。如下就是你可能用到的几个属性。

• parent – 根节点喽，要么为null，要么为根节点。
• children – 子节点。（多是个集合）。
• value –节点value属性，可保存你以为有意义的值(例如能够放个对排序有意义的值)。
• depth – 层次深度（你应该了解SVG绘图层次关系）。
• x – 节点横坐标。
• y – 节点纵坐标（舒适提示：y值的计算通用h-y，你懂得）。
• r – 节点半径。

#pack.links(nodes)

它表示一种关系，好比nodes为root，它就返回root的直接子节点，直接子节点拥有两个属性：

• source – 谁是它的父节点
• target –谁是他的子节点

这种承上启下的衔接，用于点到点画线再好不过了，画个斜线试试。

 

相似这种效果：

 

#pack.children([children])

这里容许你望文生义，它就是获取子节点。传来节点，返回它的子节点，只不过这个方法很执着，它会不断的返回子节点的子节点，知道找到叶子节点才罢休。例以下面这段信息：

 

若是你传的是flare节点，那么返回的就是一个数组套数组（子节点集合以及子子节点集合），这种方法对json数据的解析很是便利。上面不就是段json数据吗？

#pack.sort([comparator])

同级关系节点排序（也就是兄弟节点），父节点调用sort后，能够自定义比较器，按照咱们的意愿来对直接子节点进行排序，也能够不定义比较器，d3默认经过获取节点的value值进行升序排列。

 

#pack.value([value])

每一个节点都有个value，但跟这个value不是一个含义，能够理解为这个value是每一个节点的子节点value的集合，官方文档为了语言的严谨性，说了一大堆东西绕来绕去，无非就是要告诉你，你所见到的圈的大小，就是从这计算出来的。D3的强大之处在于，你仅经过叶子节点的一个字段来诠释大小标识，它就能够把节点的子节点进行累加计算出节点的最适面积大小。

#pack.size([size])

你的pack布局范围在这里设置，也就是使用pack做图占用的面积。

#pack.radius([radius])

指定画圈叶子节点半径，这样指定以后，叶子节点面积大小的计算，将再也不由value计算得来。

#pack.padding([padding])

相邻节点（同级）间的距离，默认为0。

 

原创做品，转载请注明出处！谢谢！