Javascript D3叠层柱面图至全高

Javascript D3叠层柱面图至全高,javascript,svg,graph,d3.js,Javascript,Svg,Graph,D3.js,根据标题,我试图找出最好的方法是创建一个堆叠的圆柱体,它的比例与高度成比例。下面是我努力实现的一个例子: 正如你所看到的,有三个不同的部分-无论数字是什么,它都应该与高度成比例地填充,在本例中为234px 实现这一目标的最佳方式是什么?数据集将是一个对象数组 TIA:据我所知,d3没有很好的3d渲染对象的方法-如果你想制作大量3d图形,我会使用three.js来使用webgl 但是,你甚至不需要d3。使用matrix3d css转换制作一个圆柱体非常简单,然后只需要一点js就可以制作多个圆柱体

根据标题,我试图找出最好的方法是创建一个堆叠的圆柱体,它的比例与高度成比例。下面是我努力实现的一个例子:

正如你所看到的,有三个不同的部分-无论数字是什么,它都应该与高度成比例地填充,在本例中为234px

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


TIA:

据我所知,d3没有很好的3d渲染对象的方法-如果你想制作大量3d图形,我会使用three.js来使用webgl

但是,你甚至不需要d3。使用matrix3d css转换制作一个圆柱体非常简单,然后只需要一点js就可以制作多个圆柱体并进行缩放

transform: matrix3d(1, 0, 0, 0, 0, 0.52, -0.85, 0, 0, 0.85, 0.52, 0, 0, 0, 0, 1);
如果你想为你的变换复习线性代数,这是一个很好的开始

用这个?