利用d3.js实现蜂巢图表带动画效果


Posted in Javascript onSeptember 03, 2019

利用d3.js实现蜂巢图表带动画效果

以上是效果图,本图表使用d3.js v4制作。图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放。

1.图表的主体结构是由正六边形组成,使用d3生成六边形可以使用d3-hexbin.js,生成六边形比较方便,只要给定中心点坐标和半径即可生成六边形路径,例如:

var r = 10;// 六边形半径
var pos = [[5,5],[10,10]]; // 六边形中心点坐标数组
var hexbin = d3.hexbin() // 使用hexbin.hexagon()即可生成路径
.radius(r);
var bins = hexbin(pos); // 得到生成后的六边形中心点坐标数组

2.图表的主体使用了高斯模糊滤镜,使画面表现出发光效果,背景高亮颜色使用了颜色渐变滤镜。在svg中使用滤镜,必须定义在defs中。

高斯模糊滤镜:

// 创建defs
var defs = svg.append("defs");

// 添加模糊滤镜
var filterBlur = defs.append('filter')
.attr('id', 'filterBlur')
.attr('x', -1.2)
.attr('y', -1.2)
.attr('width', 4)
.attr('height', 4);

// 添加辅助滤镜
filterBlur.append('feOffset')
.attr('result', 'offOut')
.attr('in', 'SourceGraphic')
.attr('dx', 0)
.attr('dy', 0);

// 添加模糊滤镜
filterBlur.append('feGaussianBlur')
.attr('result', 'blurOut')
.attr('in', 'SourceGraphic')
.attr('stdDeviation', 2);

// 添加辅助滤镜
filterBlur.append('feBlend')
.attr('in', 'SourceGraphic')
.attr('in2', 'blurOut')
.attr('mode', 'multiply');

重点说一下最后的feBlend,它的作用是把滤镜效果和原图混合起来。使用滤镜的话,直接给元素添加style('filter', 'url(#filterBlur)')即可。

背景高亮使用了颜色渐变滤镜:

// 添加放射性变换,生成空心填充颜色
var warnBg = defs.append("radialGradient")
.attr("id", "bg")
.attr('cx', 0.5)
.attr('cy', 0.5)
.attr('r', 0.5);

// 添加颜色
warnBg.append('stop')
.attr('offset', 0.5)
.attr('style', 'stop-color:rgb(200,200,200);stop-opacity:0.4');
warnBg.append('stop')
.attr('offset', 1)
.attr('style', 'stop-opacity:1;stop-color:rgb(123,123,123)');

其中涉及到的关键性技术就是这些,其他方面只要使用通用的d3方法就可实现。

需要注意的是,程序的结构要预先规划好,最好把主要的功能模块放在单独一个函数中,方便调用和后期修改。

如果大家有什么想法或意见可以交流一下。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
微信小程序删除处理详解
Aug 16 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
Node.js Express安装与使用教程
May 11 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 #Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 #Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 #Javascript
layui表格分页 记录勾选的实例
Sep 02 #Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 #Javascript
layui复选框的全选与取消实现方法
Sep 02 #Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 #Javascript
You might like
PHP中实现进程间通讯
2006/10/09 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
webpack优化的深入理解
2018/12/10 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
WxPython建立批量录入框窗口
2019/02/27 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
大学专科生推荐信范文
2013/11/23 职场文书
通信工程求职信
2014/07/16 职场文书
教师节活动总结
2014/08/29 职场文书
小学教师师德整改措施
2014/09/29 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript