我当前要使用d3制作世界地图。
我正在使用https://unpkg.com/world-atlas@1.1.4/world/50m.json
加载数据以绘制世界地图,其中变量id
与我的dataset2010.csv
,Country_code
相同。
如何通过json的id
和csv的Country_code
链接这两个文件。
以下是我的main.js
(function (d3,topojson) {
'use strict';
const svg = d3.select('svg');
const projection = d3.geoNaturalEarth1();
const pathGenerator = d3.geoPath().projection(projection);
const g = svg.append('g');
g.append('path')
.attr('class', 'sphere')
.attr('d', pathGenerator({type: 'Sphere'}));
svg.call(d3.zoom().on('zoom', () => {
g.attr('transform', d3.event.transform);
}));
Promise.all([
d3.json('https://unpkg.com/world-atlas@1.1.4/world/50m.json'),
d3.csv('dataset2010.csv')
]).then(([topoJSONdata, csvData]) => {
// here I could not link them
const countryName = {};
csvData.forEach(d => {
countryName[d.Country_code] = d.name;
console.log(d.Country_code);
console.log(d.name);
});
const countries = topojson.feature(topoJSONdata, topoJSONdata.objects.countries);
g.selectAll('path').data(countries.features)
.enter().append('path')
.attr('class', 'country')
.attr('d', pathGenerator)
.append('title')
.text(d => countryName[d.id]); //the d.id is from the json file.
});
}(d3,topojson));