推广 热搜:   公司  中国  行业  快速  企业  设备  上海  未来  技术 

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

   日期:2024-11-17     移动:http://www78564.xrbh.cn/mobile/quote/24052.html

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函数,传入数据更新即可。

本文地址:http://www78564.xrbh.cn/quote/24052.html    迅博思语 http://www78564.xrbh.cn/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


相关最新动态
推荐最新动态
点击排行
网站首页  |  二维码  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2023022329号