D3堆叠圆柱图到全高

Question

根据标题，我试图弄清楚最好的方法是创建一个与高度成比例的堆叠圆柱体。下面是我想要实现的目标：

正如你可以看到三个不同的部分 - 无论数字是什么，它应该总是按比例填充高度，在这种情况下〜234px。

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

TIA：）

Answer 1

据我所知，d3没有很好的方法在3d中渲染对象 - 如果你想要做很多3d图，我会用webgl来看三个.js。 / p>

但是，你甚至不需要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/是一个很好的起点。