【 D3.js 进阶系列 — 3.2 】 分区图的函数
浏览数：19 /
时间：2015年06月09日
分区图的布局比较简单，本章介绍一下分区图的参数。
分区图布局为：
d3.layout.partition()
其函数有6个。
nodes()
将根数据传入后，得到的节点的数组，每个节点添加8个参数：
- parent - 父节点
- children - 子节点
- value - 表示节点的大小，由下面 value() 函数指定的值，父节点的值等于子节点值的和
- depth - 节点的深度
- x - 节点的x方向的坐标（不一定指x轴方向，跟据 size() 函数的意义而定）
- y - 节点的y方向的坐标（同上）
- dx - x方向扩展的宽度（同上）
- dy - y方向扩展的宽度（同上）
links()
将上述节点数组传入后，得到连接线的关系，起点和终点分别存在 source 和 target 变量中。
children()
指定表示子节点的字符串。默认是：
function children(d) {
return d.children;
}表示在 JSON 文件中，子节点的变量符号用 children 表示：
{
"name":"中国",
"children":
[
{
"name":"浙江" ,
"children":
[
{"name":"杭州" },
{"name":"宁波" },
{"name":"温州" },
{"name":"绍兴" }
]
}
]
}sort()
指定对同深度的节点进行排序的函数。如果不排序，则按照默认顺序显示。排序函数与JavaScript 相同：
function comparator(a, b) {
return b.value - a.value;
}对于以上函数，如果第一个参数应该位于第二个参数之前则需令其返回一个负数，如果相等则返回0，如果第一个参数应该位于第二个之后，则令其返回一个正数。
value()
设定用哪一个值来表示节点大小。如：
function value(d) {
return d.size;
}这样设定的话，用节点里的 size 值来表示节点的大小。
size()
设置分区图的范围。【进阶 - 第 3.0 章】和【进阶 - 第 3.1 章】中展示了当 size 函数的设定不同时，图表如何不同。
如果是方形的：size( [ width , height ] )
如果是圆形的：size( [ 2 * Math.PI, radius * radius ] ) // radius 为圆的半径
文档信息
- 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
- 发表日期：2014 年 12 月 7 日
- 更多内容：OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
- 备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
