ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
分区图的布局比较简单,本章介绍一下分区图的参数。 分区图布局为: ~~~ 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 章](http://www.ourd3js.com/wordpress/?p=653)】中展示了当 size 函数的设定不同时,图表如何不同。 如果是方形的:size( [ width , height ] ) 如果是圆形的:size( [ 2 * Math.PI, radius * radius ] )      // radius 为圆的半径 ### 文档信息 - 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND) - 发表日期:2014 年 12 月 7 日 - 更多内容:[OUR D3.JS - 数据可视化专题站](http://www.ourd3js.com/) 和 [CSDN个人博客](http://blog.csdn.net/lzhlzz) - 备注:本文发表于 [OUR D3.JS](http://www.ourd3js.com/) ,转载请注明出处,谢谢