d3.js制作蜂巢图表带动画效果

CarterLi 发布于2019-08-26 10:36 / 3279人阅读

摘要：高斯模糊滤镜创建添加模糊滤镜添加辅助滤镜添加模糊滤镜添加辅助滤镜重点说一下最后的，它的作用是把滤镜效果和原图混合起来。

以上是效果图，本图表使用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.ucloud.cn/yun/106448.html

14个最好的 JavaScript 数据可视化库

摘要：适用于，演示这是开发的一个简单的可视化库，它允许你创建所有常用的图表类型条形图，树形图，折线图，面积图等。可以轻松地对折线图和条形图进行混合和匹配以组合不同的数据集，这是非常棒的功能。翻译：疯狂的技术宅原文：https://www.monterail.com/blo... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章你的程序有多...

Mertens 2019-08-23 16:23 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

terasum 2019-08-02 11:51 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

dreambei 2019-08-29 17:08 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

archieyang 2019-08-23 12:36 评论0 收藏0
常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0