用d3.js实现蜂巢图的动画效果

以上是渲染图，这个图是d3.js v4制作的.图表的主要功能是以六边形网格显示数据。点击底部的图标，将指定的网格切换为高亮显示，图表可以用浏览器任意缩放。

1.图表的主要结构由规则的六边形组成。d3-hexbin.js可以用来生成六边形。生成六边形很方便。只要给定中心点的坐标和半径，就可以生成六边形的路径。例如：

var r=10//六边形半径var pos=[(5，5]，[10，10]]；//Hexagon中心坐标数组var hexbin=d3.hexbin() //使用hexbin.hexagon()生成路径。半径(r)；var bin=hex bin(pos)；//获取生成的六边形中心点坐标数组。2.图表主体采用高斯模糊滤镜，使画面呈现发光效果，背景高亮颜色采用颜色渐变滤镜。svg中使用的过滤器必须在defs中定义。

高斯模糊滤镜：

//create defs var defs=SVG . append(' defs ')；//添加模糊过滤器var filter blur=defs . append(' filter ')。attr ('id '，' filterblur ')。attr ('x '，-1.2)。attr ('y '，-1.2)。attr('宽度'，4)。attr//添加辅助过滤器filterblur.append ('feoffset ')。attr ('result '，' off out ')。attr ('in '，' sourcegraphic ')。attr ('dx '，0)。attr ('dy '，0)；//添加模糊滤镜filter blur . append(' FeGaussian blur ')。attr('结果'，'模糊掉')。attr ('in '，'源图形')。attr('标准偏差'，2)；//添加辅助过滤器filterblur.append ('feblend ')。attr ('in '，' sourcegraphic ')。attr ('in2 '，'模糊掉')。attr ('mode '，' multiply ')；关注最终的feBlend，它用于混合滤镜效果和原始图像。要使用过滤器，只需向元素添加样式(“过滤器”、“网址(# filterblur)”)。

背景高光使用颜色渐变滤镜：

//添加放射性变换以生成空心填充颜色var warn BG=defs.append('径向渐变')。attr ('id '，' BG ')。attr ('CX '，0.5)。attr ('cy '，0.5)。attr ('r '，0.5)//添加颜色warnbg.append ('stop ')。attr('偏移量'，0.5)。attr ('style '，' stop-color:rgb (200，200，200)；stop-opa city 33600.4’)；warnBg.append('stop ')。attr('偏移量'，1)。attr('style '，' stop-opa city 33601；stop-color:rgb(123，123，123)')；这些都是涉及到的关键技术，其他方面只有用一般的d3方法才能实现。

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

如果你有什么想法或意见，可以交流。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。