利用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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
Angular排序实例详解
Jun 28 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
vue实现图片上传到后台
Jun 29 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
Terran兵种对照表
2020/03/14 星际争霸
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
PHP函数eval()介绍和使用示例
2014/08/20 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
php intval函数用法总结
2019/04/14 PHP
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
理解Javascript闭包
2013/11/01 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
Vue 实现登录界面验证码功能
2020/01/03 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
解析Python中while true的使用
2015/10/13 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Python threading的使用方法解析
2019/08/28 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
高中班级口号
2014/06/09 职场文书
2015年财政局工作总结
2015/05/21 职场文书
销售口号霸气押韵
2015/12/24 职场文书
电力安全学习心得体会
2016/01/18 职场文书