d3.partitioin知识整理

最新推荐文章于 2021-08-07 16:26:21 发布

原创最新推荐文章于 2021-08-07 16:26:21 发布 · 445 阅读

1 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

22 篇文章

订阅专栏

15 篇文章

订阅专栏

本文介绍了D3.js中的分区布局(partition)，包括partition.nodes()方法的使用，以及如何通过partition.size()设置布局大小。分区布局适用于笛卡尔和径向布局，可以创建冰柱树和旭日图。每个节点包含父节点、子节点、值、深度、坐标范围等信息。

# partition.nodes(root)

运行分区布局，将返回指定根节点 root 的相关联的节点阵列数组。分区布局是D3家族(hierarchical layouts)中的一部分。这些布局将遵循相同的基本结构：传递给布局的输入参数值是层次结构的根节点，并且输出返回值将是一个代表所有节点经过计算的位置的数组。每个节点上将拥有以下几个属性：

parent - 父节点，或空的根节点。
children - 子节点的阵列数组，或者为空的叶节点。
value - 该节点的值，值访问器所返回的值。
depth - 节点的深度（即节点的层级数），根节点为0。
x - 节点位置的最小x坐标。
y - 节点位置的最小y坐标。
dx - 节点位置的x范围。
dy - 节点位置的y范围。

虽然布局只有一个x和y尺寸，但它却可以表示一个任意的坐标系；例如，你可以把X作为半径、y作为角度用以产生径向而非笛卡尔布局。在笛卡尔取向上，x，y，dx和dy分别相当于SVG矩形元素(rect)的“x”，“y”，“width”和“height”属性。在径向取向上，它们可以被用于计算弧(arc)生成器的innerRadius，startAngle，outerRadius和endAngle。笛卡尔取向可被称为冰柱树(icicle tree)，而径向取向被称为旭日图(sunburst)。

# partition.size([size])

如果指定的size，将通过指定的二元素数组[x,y]设置为有效布局的大小:

冰柱图：

var width = 1800, height = 2000;
var partition = d3.layout.partition()
    .size([width, height])
    .value(function(d) { return d.size;
 });

旭日图：

var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return d.size; });