利用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方法就可实现。

需要注意的是，程序的结构要预先规划好，最好把主要的功能模块放在单独一个函数中，方便调用和后期修改。

如果大家有什么想法或意见可以交流一下。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 使用D3.js制作图表详解

    使用D3.js制作图表详解

    D3是用于数据可视化的Javascript库.使用SVG,Canvas和HTML.结合强大的可视化技术和数据驱动的DOM操作方法. D3与JQuery的区别 D3是数据驱动的,JQuery不是:我们使用JQuery直接操纵元素:但是使用D3 时我们需要通过D3专有的data(),enter()和exit()方法提供数据和回调,然后D3操作元素. D3通常用于数据可视化:JQuery用于创建Web应用.D3有很多数据可视化扩展:JQuery有很多Web应用插件.两者都是Javascript DOM

  • JavaScript可视化图表库D3.js API中文参考

    D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl

  • 利用d3.js实现蜂巢图表带动画效果

    利用d3.js实现蜂巢图表带动画效果

    以上是效果图,本图表使用d3.js v4制作.图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放. 1.图表的主体结构是由正六边形组成,使用d3生成六边形可以使用d3-hexbin.js,生成六边形比较方便,只要给定中心点坐标和半径即可生成六边形路径,例如: var r = 10;// 六边形半径 var pos = [[5,5],[10,10]]; // 六边形中心点坐标数组 var hexbin = d3.hexbin() // 使用hexb

  • D3.js实现折线图的方法详解

    D3.js实现折线图的方法详解

    前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

  • D3.js实现雷达图的方法详解

    D3.js实现雷达图的方法详解

    前言 再简单介绍下D3.js,D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 本文依然是先把简单的画图框架搭起来,添加SVG画布.这里和饼图有点类似,为了方便后面的绘制,我们把组合这些元素的g元素移动到画布的中心: <!DOC

  • 利用Three.js制作一个新闻联播开头动画

    利用Three.js制作一个新闻联播开头动画

    目录 这里才是引言 技术选型 场景分解 代码逻辑分解 创建背景图和背景音乐 背景图 背景音乐 在线体验地址:点我预览 代码地址:点我github 这里才是引言 五一居家隔离,闲着也是闲着,想着整个活儿,于是就有了这个项目. 项目本身不是很难,但是中间确实是遇到了一些小问题,断断续续也是花费了三四天时间才写完,还有一些需要优化的地方,后续有时间再整. 我会从脚手架开始,按照场景中出现的物体顺序逐条进行讲解制作,每个物体将分为独立的一篇文章,方便理解.Go. 技术选型 选用vite作为构建工具: 选

  • 利用D3.js实现最简单的柱状图示例代码

    利用D3.js实现最简单的柱状图示例代码

    首先把效果图放出来: 具备了一个柱状图的基础元素:柱形,坐标轴,刻度,数值等. 不得不说,d3.js比直接用的echarts更麻烦,但是确实更自由. 来看看如何实现吧. //确定画布的大小 var width = 400; var height = 400; //在 body 里添加一个 SVG 画布 var svg = d3.select("body") .append("svg") .attr("width", width) .attr(&q

  • 利用JS实现文字的聚合动画效果

    利用JS实现文字的聚合动画效果

    前言 所谓文字聚合效果,原理就是将容器分为若干的小块,然后每个小块设置 background-poisition ,最后添加css3动画就可以了,去掉注释,也就仅仅20行的代码. 先来看看效果图: js代码如下: //c为列数,r为行数,把box划分成多少个小块 var box = document.querySelector('.boxWrap1'),c=4,r=8; //每个小块的宽高 var w = box.offsetWidth/c,h = box.offsetHeight/r; //循

  • 利用d3.js力导布局绘制资源拓扑图实例教程

    利用d3.js力导布局绘制资源拓扑图实例教程

    前言 最近公司业务服务老出bug,各路大佬盯着链路图找问题找的头昏眼花.某天大佬丢了一张图过来"我们做一个资源拓扑图吧,方便大家找bug". 就是这个图,应该是马爸爸家的 好吧,来仔细瞧瞧这个需求咋整呢.一圈资源围着一个中心的一个应用,用曲线连接起来,曲线中段记有应用与资源间的调用信息.emmm 这个看起来很像女神在遛一群舔狗... 啊不,是 d3.js 力导向图! d3.js 力导向图 d3.js 是著名的数据可视化基础工具,他提供了基本的将数据映射至网页元素的能力,同时封装了大量实

  • JS实现焦点图轮播效果的方法详解

    JS实现焦点图轮播效果的方法详解

    本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class="banner"> <ul id="list-banner" class="list-banner fn-clear" style="lef

  • JS实现的透明度渐变动画效果示例

    JS实现的透明度渐变动画效果示例

    本文实例讲述了JS实现的透明度渐变动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS透明度变化效果</title> <style> body{ margin: 0px; padding: 0px; } .redb{ width:200px; height: 20

  • js轮播图之旋转木马效果

    本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将数组最后一个数据删除,然后添加到数组的开头 先附上效果图,再来实现 接下来就是最主要的,封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值(兼容ie8) function getStyle(element, attr) { return window.getComputedStyl

随机推荐