利用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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
javascript实现左右缓动动画函数
Nov 25 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 深入理解strtotime函数的使用详解
2013/05/23 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
浅谈Vue.js
2017/03/02 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Python 错误和异常小结
2013/10/09 Python
python实现探测socket和web服务示例
2014/03/28 Python
python自动格式化json文件的方法
2015/03/11 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
后勤主管工作职责
2013/12/07 职场文书
会议开场欢迎词
2014/01/15 职场文书
英文商务邀请信
2014/01/22 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
社区食品安全实施方案
2014/03/28 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
教师求职自荐信
2015/03/26 职场文书
小平小道观后感
2015/06/09 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript