![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端可视化
文章平均质量分 90
gfddd1231
这个作者很懒,什么都没留下…
展开
-
threejs实现模型多种形式布局,球形,圆盘,桶型,弧形屏
接上一篇,上一篇讲了根据数量计算行列数,从而得出需要加载的模型处于几行几列其实官方也有类似的例子,提供了思路,css3d_periodictable但是基于官方例子也有些坑需要注意,比如官方的桶型其实是螺旋形的布局,且布局是根据官方提供的数据得出的,我们没有现成的数据就需要去算这边基于官方改造了下,然后新增了两种模式,圆盘及弧形屏幕。这边因为是公司的项目不方便截图,所以只能靠描述想像总体就是1、球形(同官方)2、桶型(由官方螺旋形改成了桶,类似上下中空的烟囱管道,每个模型相当于上面一块砖)3、原创 2020-09-16 16:40:55 · 2296 阅读 · 0 评论 -
js实现方阵布局
个人主要用在可视化时需要对一些模型排布时,比如存在很多队伍需要排列明确下思路可知队伍数量,需要排布成方阵1、计算有多少行,列2、根据行列数,遍历队伍求出每个队伍对应的位置求行列数如果有问题,望指正。根据需求来最后使用的是最后一种,另外两种测试可能不全面// 根据数量计算行列数,取最近的行列数,及总数20就求4*5function computeRowCol(number){ let answer = Math.sqrt(number), //求出平方根 row, //行数原创 2020-09-07 17:53:42 · 620 阅读 · 0 评论 -
前端实现扩散动画
使用场景原创 2020-05-08 18:43:13 · 1551 阅读 · 0 评论 -
THREEJS相关3d-force-graph 3d力导图使用
api文档不是很友好,虽然有官方例子但是也不全面,网上教程也很少几乎找不到,写完一个例子所以记录一下自己用到的一些api的使用3d力导图3d-force-graph github地址谷歌翻译一下介绍:一种Web组件,使用力导向迭代布局表示三维空间中的图形数据结构。 使用ThreeJS / WebGL进行3D渲染,使用d3-force-3d或ngraph作为底层物理引擎。引入script可直...原创 2019-07-01 21:44:59 · 13820 阅读 · 61 评论 -
vue中three及其依赖引入和使用
官方文档和例子[https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene]引入单页面应用<script src="../lib/three.js"></script> //ES5,相关依赖相同模块化应用npm 安装npm install three --save...原创 2019-07-18 10:46:43 · 7095 阅读 · 0 评论 -
d3中data方法更新数据导致第一条数据丢失,以及remove后再填充数据力导图线消失的问题,d3+svg可视化开发注意事项
在用d3开发力导图时,需要别的页面点击,服务器发送websocket数据到展示界面更新生成的力导图。初始时会生成打底的数据,websocket发送数据时将该数据加到原来的数据上,并闪烁。而websocket发送的数据可能是新数据也可能有原来数据,我是每次都把所有数据更新,导致前一次数据和新一次数据有大量重复。数据量多,不可能一个个去找某个节点是否生成成功,发现某个节点丢失也是误打误撞。这个问题...原创 2019-08-09 20:32:50 · 945 阅读 · 0 评论