通过d3.js画出世界地图并按照人口占比填充颜色,同时当鼠标悬停时,显示提示框,提示框内显示国家和人口
时间: 2024-06-08 09:12:00 浏览: 12
以下是一个简单的实现:
首先,需要一个包含每个国家名称和人口的数据集。我们可以使用一个JSON文件来存储这些数据,例如:
```json
[
{ "country": "China", "population": 1439323776 },
{ "country": "India", "population": 1380004385 },
{ "country": "United States", "population": 331002651 },
{ "country": "Indonesia", "population": 273523615 },
{ "country": "Pakistan", "population": 220892340 },
{ "country": "Brazil", "population": 212559417 },
{ "country": "Nigeria", "population": 206139589 },
{ "country": "Bangladesh", "population": 164689383 },
{ "country": "Russia", "population": 145934462 },
{ "country": "Mexico", "population": 128932753 },
{ "country": "Japan", "population": 126476461 },
{ "country": "Philippines", "population": 109581078 },
{ "country": "Egypt", "population": 102334404 },
{ "country": "Ethiopia", "population": 114963588 },
{ "country": "Vietnam", "population": 97338583 },
{ "country": "DR Congo", "population": 89561403 },
{ "country": "Iran", "population": 83992949 },
{ "country": "Turkey", "population": 84339067 },
{ "country": "Germany", "population": 83783942 },
{ "country": "Thailand", "population": 69799978 }
]
```
接下来,我们需要使用d3.js来绘制地图。此处我使用的是自带的世界地图数据集,可以通过d3.geoWorld()函数来获取。我们还需要一个颜色比例尺来将国家按照人口占比填充颜色。
```javascript
var width = 800;
var height = 600;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geoMercator()
.scale(130)
.translate([width / 2, height / 1.5]);
var path = d3.geoPath().projection(projection);
var colorScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.population)])
.range(["#f7fbff", "#08306b"]);
d3.json("https://d3js.org/world-110m.v1.json").then(function(world) {
svg.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("fill", function(d) {
var country = d.properties.name;
var population = data.find(x => x.country === country).population;
return colorScale(population);
})
.attr("d", path)
.on("mouseover", function(d) {
var country = d.properties.name;
var population = data.find(x => x.country === country).population;
d3.select("#tooltip")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 25) + "px")
.select("#value")
.text(country + ": " + population);
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
d3.select("#tooltip").classed("hidden", true);
});
});
```
最后,我们需要在HTML中添加一个提示框,并为其添加样式。
```html
<div id="tooltip" class="hidden">
<p><strong id="value"></strong></p>
</div>
<style>
#tooltip {
position: absolute;
z-index: 10;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px;
}
#tooltip.hidden {
display: none;
}
</style>
```
完整的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>World Map</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<style>
#tooltip {
position: absolute;
z-index: 10;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px;
}
#tooltip.hidden {
display: none;
}
</style>
</head>
<body>
<div id="tooltip" class="hidden">
<p><strong id="value"></strong></p>
</div>
<script>
var width = 800;
var height = 600;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var projection = d3.geoMercator()
.scale(130)
.translate([width / 2, height / 1.5]);
var path = d3.geoPath().projection(projection);
var colorScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.population)])
.range(["#f7fbff", "#08306b"]);
d3.json("https://d3js.org/world-110m.v1.json").then(function(world) {
svg.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("path")
.attr("fill", function(d) {
var country = d.properties.name;
var population = data.find(x => x.country === country).population;
return colorScale(population);
})
.attr("d", path)
.on("mouseover", function(d) {
var country = d.properties.name;
var population = data.find(x => x.country === country).population;
d3.select("#tooltip")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY - 25) + "px")
.select("#value")
.text(country + ": " + population);
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
d3.select("#tooltip").classed("hidden", true);
});
});
</script>
</body>
</html>
```