d3.js制作蜂巢图表带动画效果
2019-08-14 10:10:22来源:博客园 阅读 ()
以上是效果图,本图表使用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.cnblogs.com/eagle1098/p/11169856.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- NiftyCube实现圆角边框的方法 2020-03-20
- JS实现标签页切换效果 2020-03-12
- vue.js(4)--字符串跑马灯 2019-08-14
- jquery图片延迟加载的必备技能 2019-08-14
- D3.js 动画 过渡效果 (V3版本) 2019-05-22
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash