D3.js画图:3D动态饼图(齿轮图)

JavaScript010

D3.js画图:3D动态饼图(齿轮图),第1张

通常画可视化图的工具很多,除了d3.js,还有echarts.js等。

通过比较,看起来ECharts.js更容易上手,但是因为我需要更灵活更符合个性定制化的工具,所以选了d3.js。

经过一段时间的磨炼,从折线图、闭合路径图、蜂窝图、直角坐标、极坐标都玩了个遍。

那这次就来个3D的吧,其实d3.js做3D的图不是很容易的,有更好的选择,但我认准了d3.js,一条道走到黑吧(想起高中数学老师说的话,当你解题解到一半时发现有更好的办法,不,赶紧忘掉,接着当前的方法,只要方法没错,总能解出来,也许会傻一点,但是一定会有正确的结果;如果中途放弃,也许另一个方法更快更聪明,但也许更慢或者错误,不算到最后,谁都不知道谁最准确。我选择相信他的话,于是。。。我成了程序员O(∩_∩)O哈哈~)。

有人鄙视拿来主义,要我说,你能拿来那是你的本事,如果还能在此基础上做出更好的东西,何乐而不为呢?

每个人时间有限,每个项目也有deadline,不可能从每一个螺丝钉怎么拧开始学起,不然怎么会有那么多五花八门的框架,会有封装好的组件和接口,正因为有人已经做了前期工作,所以时间才能省下来做更有意义的事情,这就是站在巨人肩上的道理所在吧。

但是我们得明白拿来的东西的原理,以及出了问题该怎么解决的能力。然后才能做出更厉害的东西。

首选当然是官网的例子咯,目测搜了一圈,终于找到一个3D Donut。就是你了,我的巨人。

把该地址的donut3d.js拷贝下来作为画3D饼图的基础js,待会会在此基础上修改,以满足我的要求(长的像齿轮的要求)。

那我们就一睹她的芳容吧。

如果这张图符合你的要求,那就打住,不用往下看了,直接看官网例子即可。

注意d3版本的问题,如果你用d3.v3.js,恭喜你,啥也不用改,直接拿来用;如果你用d3.v5.js,那稍微改下方法,比如d3.v5.js没有d3.layout,所以d3.layout.pie改成d3.pie。我就是那个不幸的人,用的d3.v5.js。没关系,改起来很快,运行下,看哪里有错,就改哪里,O(∩_∩)O哈哈~so easy!

还是先上个我已经改好之后的3D饼图(齿轮图)吧,方便说明。

其实显示的时候是个动态的,一节一节显示出齿轮的。

背景是黑乎乎的,据说现在流行黑乎乎的背景,显得有科技感,技术也要赶时髦啊,我这么fashion的人,做出来的东西也要fashion啊O(∩_∩)O~

从以上分析可以看出,难啃的骨头在第4点。这个图断断续续花了3天时间才搞定,为啥是断断续续呢,因为还有其他工作要做嘛,你懂得。

那就按顺序一条一条实现,总有一天我们的愿望都能实现!

首先新建svg及设置宽高。

我是切分成了32个小齿轮(包含透明的),如果你想分的更细,可以分成40或50个,只要你觉得好看就行。

既然要分成32个小立体快,那数据也要切分成32个。

通过以上处理,把数据整合成可以生成齿轮的完整数据dataset。

如果不增加左侧面和右侧面,那调用donut3d.js的draw方法后,会生成什么样的图形呢?

请各位仔细看。

是不是有种被掏空的感觉?如果你觉得这样挺好看,那也行,打住吧,后面就不用再看了;如果你想补齐其他面,请耐心往下看。

经过观察和比较,增加左侧面和右侧面就能填满空虚的心啦啦啦~

这次要在donut3d.js这个巨人身上添砖加瓦咯。

然后再用新增加的两个方法画出左右侧面。

终于填满需要的每一面,看上去像个立体齿轮图了。

这个图是很久之前做的,当时花了很长时间调试,每一个面有4条边,定位2个点,再加上高度和内半径,就可以计算出4个点,然后就可以画出4条边,最后填充颜色,一个面就完成了。

最近整理文档时觉得有必要写出来,方便以后查阅和探讨,也告诉自己积累是一个长期过程,不急不躁,慢慢来,一步一步完成既定目标,总有一天你会走遍技术的每个角落。

现在我整理成vue组件,传一个百分比的参数,就可以显示3D齿轮图了,我的3D齿轮图也成巨人啦。

郭敦顒回答:

这可能是一项尚未涉及到的等差变形技术——

把本是长方形图片压缩成梯形图片,按其一半设定为正方形,等价于压缩一边为直角梯形,按对称性展开即为等边梯形了。

设正方形边长为10cm,400万像素图片,那么每边有2000个(严格说是2001个)等分点,划平行线,将图片分成400万个小方格,这小方格即为像素。每个小方格的边长则为10cm/2000=50mm/1000=50μm(微米)。

如果把最上方格宽度尺寸由50μm改为40μm向下依次递增到50μm,社会上尺度是一个等差数列,项数为2000,首项为40μm,末项为50μm。

如此变形,即可把本是长方形图片压缩成梯形图片。

在实用上可利用视线物像的大小与距离成反比(αf=ζ, α—物像尺寸,f—距离, ζ为常数)这一原理,通过照相,把图片斜放或斜照,即可将本是长方形图片改变成梯形图片了。《几何原本》一书的封面原为长方形的,通过这种摄像,封面变成了梯形。

非常遗憾的是图片不能上传了,已有十几天。此种摄像方法,你若能用得上,可自拍看看效果。

在摄影棚中的一些特技摄影,应该会有这方面的运用。