D3-stacks

按照某种顺序的x，y轴由多个层次构成，这种形状便是堆叠图。

如：

堆叠图可以同时展示总量和构成总量的分量组成。但是不同的分量之间是难以比较的。

d3提供了d3.stack() 来生成堆叠图。

let stack = d3.stack()

stack根据指定的数组计算出一个stack布局。stack(data[, arguments…]) 它返回一个三维数组：

[
	[//这一维度表示x轴对应的节点
		[],//这一维度有多少个兄弟元素，则表示，每一个x轴节点在y轴上有几个层次，
		[]//数组元素表示每一个层次的底部对应的y值，和顶部对应的y值
	],
	[//这一维度表示x轴对应的节点
		[],
		[]
	]
]

构造stack

以如下数据为例：

我们要以Month为x轴，其属性堆叠在y轴来展示一个堆叠图。

stack.keys([keys])
用于设置那些属性要在y轴上做堆叠展示。
在这里即为：

stack.keys(["Apples", "Bananas", "Cherries", "Dates"])

stack.value([func])
设置获取每个key获取对应值的方式。一般情况下不用修改这个，默认就可以。它默认是，以对象属性读取的方式读取value值。
stack.order([order])
设置y轴上的堆叠属性的顺序。默认为d3.stackOrderNone(series)，即keys设置的顺序。
stack.offset([offset])
设置堆叠类型。

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦