利用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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
vue实现淘宝购物车功能
Apr 20 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之字符串变相相减的代码
2007/03/19 PHP
php生成xml简单实例代码
2009/12/16 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python生成九宫格图片
2018/11/19 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Nike香港官网:Nike HK
2019/03/23 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
什么是规则表达式
2012/05/03 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
自主实习接收函
2014/01/13 职场文书
讲解员培训方案
2014/05/04 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
社区志愿者活动方案
2014/08/18 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android