GTD数据分析及可视化项目的第二张图表,项目总体介绍见这篇文章。
统计组合只有攻击,目标,武器类型乘以发生次数,死亡人数6种组合,故使用category编号1-6代表6种统计类型。攻击,目标,武器类型在原数据集中有各自编码,在type列记录。
制作词云图需要用d3的一个第三方库d3-cloud,该库可使用npm安装。引用:
HTML部分,设置两个下拉框和两个起止年份数字输入框和一个生成按钮。
@click事件调用onGenerate函数,根据下拉框组合得到1-6的编号,和起止年份共同作为参数调用procData函数。procData函数中根据这3个参数进行筛选,然后按指标排序。为了美观,只取排名前8的种类做图。实践中发现不同种类的比例过于悬殊,例如第一名的爆破物袭击可能是第二名的10倍以上,因此词的大小不能严格按比例,而是按排名映射到一个自定义的比例。我这里使用的是:
词云图的实现我查到了一个很巧妙的做法:用JS的函数闭包,封装一个生成词云的对象,看代码。
在外部调用时就很简单了,先传入根节点生成一个词云对象,然后调用其update函数,传入数据更新即可。