最新动态
Vue + D3 动态可视化图实现之二:词云图
2024-11-17 23:53

GTD数据分析及可视化项目的第二张图表,项目总体介绍见这篇文章。

Vue + D3 动态可视化图实现之二:词云图

Vue + D3 动态可视化图实现之二:词云图

统计组合只有攻击,目标,武器类型乘以发生次数,死亡人数6种组合,故使用category编号1-6代表6种统计类型。攻击,目标,武器类型在原数据集中有各自编码,在type列记录。 Vue + D3 动态可视化图实现之二:词云图

制作词云图需要用d3的一个第三方库d3-cloud,该库可使用npm安装。引用

 

HTML部分,设置两个下拉框和两个起止年份数字输入框和一个生成按钮。

 

@click事件调用onGenerate函数,根据下拉框组合得到1-6的编号,和起止年份共同作为参数调用procData函数。procData函数中根据这3个参数进行筛选,然后按指标排序。为了美观,只取排名前8的种类做图。实践中发现不同种类的比例过于悬殊,例如第一名的爆破物袭击可能是第二名的10倍以上,因此词的大小不能严格按比例,而是按排名映射到一个自定义的比例。我这里使用的是

 

词云图的实现我查到了一个很巧妙的做法:用JS的函数闭包,封装一个生成词云的对象,看代码。

 

在外部调用时就很简单了,先传入根节点生成一个词云对象,然后调用其update函数,传入数据更新即可。


    以上就是本篇文章【Vue + D3 动态可视化图实现之二:词云图】的全部内容了,欢迎阅览 ! 文章地址:http://www78564.xrbh.cn/quote/24052.html 
     动态      相关文章      文章      同类文章      热门文章      栏目首页      网站地图      返回首页 迅博思语移动站 http://www78564.xrbh.cn/mobile/ , 查看更多