Vue + D3 动态可视化图实现之五：世界地图

Altair_Alpha_

已于 2022-11-10 20:37:59 修改

阅读量6.1k

点赞数 6

分类专栏：数据可视化文章标签： vue.js 前端 javascript

于 2021-02-07 17:45:59 首次发布

本文链接：https://blog.csdn.net/Altair_alpha/article/details/113744526

版权

2022/11/10 声明

（这篇文章也被下架了）
这个项目只是以 GTD 数据库为例做数据的统计及可视化，不涉及对任何具体事件的分析和评论，希望能恢复发表！文中地图数据取自互联网，不代表立场，博主坚持拥护我国领土完整！

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

最终效果

在这里插入图片描述

数据集

统计目标是1970-2018年各国恐怖袭击情况，不用分年份，按国家统计即可。
在这里插入图片描述

实现

绘制世界地图的方案是使用world.geojson文件，这部分有比较完整的教程，见项目总体介绍的推荐学习网站。

		mounted() {
   
			// The svg
			svg = d3.select('#choropleth-graph')
				.append("svg")
				.attr("width", width)
				.attr("height", height)
				.on('mousemove', mouseMove)
			
			// 悬浮提示信息
			tooltip = d3.select('#tooltip')
				.style('display', 'none');

			projection = d3.geoMercator()
				.scale(180)
				.center([0, 20])
				.translate([width / 2, height / 2])