美文网首页让前端飞工作生活Web前端之路
d3.js制作蜂巢图表带动画效果

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

作者: eagle1098 | 来源:发表于2019-08-06 19:44 被阅读16次

  以上是效果图,本图表使用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方法就可实现。

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

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

相关文章

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

    以上是效果图,本图表使用d3.js v4制作。图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子...

  • 当PPT邂逅C4D:炫酷图表一键生成!(内附福利)

    图表在PPT中经常使用到,不过PPT制作图表的样式有限,要实现动态图表无非也就添加些动画或者平滑切换效果 因此,为...

  • 免费PPT模板、教程

    教程有许多, 分的很细, 文字处理、图片处理、配色、排版、 手绘图像、风格效果、动画制作、图表 不仅如此, 教程数...

  • Flutter 动画

    字体放大效果-补间动画 缓动动画 3.遮罩动画 4.数字动画 5.图表动画

  • 【PS教程】制作蜂巢效果

  • D3.js制作图表

    D3是用于数据可视化的Javascript库。使用SVG,Canvas和HTML。结合强大的可视化技术和数据驱动的...

  • 如何制作「商务气质型」图表

    如何制作「商务气质型」图表,我的回答是找商业期刊去「模仿」。 模仿思路:效果=图表+增减元素+设计 ▎图表 95%...

  • 小程序所遇问题总结

    重构篇 Q1:小程序动画效果较多 问题:小动画动画效果较多,手动调动画较繁琐解决:使用在线动画制作工具,动画效果...

  • 怎样用ppt制作动画效果

    一,制作动画与音频 制作之前先准备好图片与音频 1,动画--自定义动画---添加效果。添加效果里面有各种版本 注:...

  • 制作lottie动画并应用到android项目

    效果图: 这是一个启动页的lottie动画效果,有一些丑,自己做的动画将就看吧。 AE动画制作 工具准备 动画效果...

网友评论

    本文标题:d3.js制作蜂巢图表带动画效果

    本文链接:https://www.haomeiwen.com/subject/mbjchctx.html