GTD数据分析及可视化项目的第二张图表,项目总体介绍见这篇文章。
统计组合只有攻击,目标,武器类型乘以发生次数,死亡人数6种组合,故使用category编号1-6代表6种统计类型。攻击,目标,武器类型在原数据集中有各自编码,在type列记录。
制作词云图需要用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/ , 查看更多