利用d3.js实现蜂巢图表带动画效果
作者:eagle1098 时间:2024-04-18 10:15:19
以上是效果图,本图表使用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方法就可实现。
需要注意的是,程序的结构要预先规划好,最好把主要的功能模块放在单独一个函数中,方便调用和后期修改。
如果大家有什么想法或意见可以交流一下。
来源:https://www.jianshu.com/p/768ac408a225
标签:d3.js,蜂巢,图表
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2024-01-19 08:47:12
![](https://img.aspxhome.com/file/2023/3/112913_0s.jpg)
tensorflow实现加载mnist数据集
2022-02-06 06:20:24
![](https://img.aspxhome.com/file/2023/3/105263_0s.jpg)
MYSQL中文乱码问题的解决方案
2024-01-18 00:49:48
![](https://img.aspxhome.com/file/2023/5/101545_0s.png)
JavaScript 与 ActionScript 3.0 交互的一些问题
2008-01-27 12:20:00
tensorflow 模型权重导出实例
2022-10-14 06:25:25
pytest-sugar 执行过程中显示进度条的脚本分享
2023-01-26 13:20:40
golang游戏等资源压缩包创建和操作方法
2024-04-30 10:00:22
用VB将ASP代码封装成DLL
2007-09-28 12:46:00
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2023-02-18 14:45:40
如何实现网上站点维护?
2010-05-24 18:35:00
Windows系统下安装GIt及GIT基本认识和配置
2023-06-14 20:54:53
![](https://img.aspxhome.com/file/2023/0/67200_0s.png)
MySQL在右表数据不唯一的情况下使用left join的方法
2024-01-18 22:42:02
![](https://img.aspxhome.com/file/2023/0/114020_0s.png)
php查找指定目录下指定大小文件的方法
2023-09-03 17:53:36
mySQL UNION运算符的默认规则研究
2024-01-21 17:51:39
python实现由数组生成对称矩阵
2022-12-09 15:01:53
sqlserver数据库出现置疑的解决思路
2024-01-13 20:11:34
Linux下mysql5.6.24(二进制)自动安装脚本
2024-01-21 12:36:42
整理各种js按比例缩放图片方法
2007-09-27 20:01:00
ASP中查询数据库记录写入XML文件示例
2007-08-23 13:12:00
一个非常实用的php文件上传类
2023-08-15 17:04:56