D3 堆叠圆柱图到全高

Question

根据标题，我正在尝试找出创建与高度成比例的堆叠圆柱体的最佳方法。下面是我要达到的目标的图示：

如您所见，共有三个不同的部分 - 无论数字是什么，它都应始终与高度成比例地填充，在本例中约为 234 像素。

实现这一目标的最佳方法是什么？数据集将是一个对象数组。

TIA :)

Answer 1

据我所知，d3 没有在 3d 中渲染对象的好方法——如果你想做很多 3d 图形，我会看看 three.js 用 webgl 来做。

但是，你甚至不需要 d3。使用 matrix3d css 变换制作圆柱体非常简单（参见 http://jsfiddle.net/L2dsr0v0/1/），之后您只需要一点 js 即可制作多个圆柱体并进行缩放。

transform: matrix3d(1, 0, 0, 0, 0, 0.52, -0.85, 0, 0, 0.85, 0.52, 0, 0, 0, 0, 1);

如果您想查看变换的线性代数，http://9elements.com/html5demos/matrix3d/ 是一个不错的起点。