Я создаю картограмму в d3 v6, но карта показывает только один цвет. Я хочу, чтобы карта была покрыта на основе total_cases. Это код, который я использую:
// The svg
const margin = { top: 500, bottom: 500, left: 100, right: 0},
width = 600,
height = 500;
//Choropleth Map
const svg1 = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
// Map and projection
const path = d3.geoPath();
const projection = d3.geoMercator()
.scale(70)
.center([0,20])
.translate([width / 2, height / 2]);
// Data and color scale
const data = new Map();
const colorScale = d3.scaleThreshold()
.domain([0, 300000000])
.range(d3.schemeBlues[9]);
// Load external data and boot
Promise.all([
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
d3.csv("mapdata.csv", function(d) {
data.set(d.country, +d.total_cases_per_million);
})
]).then(function(loadData){
let topo = loadData[0]
console.info(data);
let mouseOver = function(d) {
d3.selectAll(".Country")
.transition()
.duration(200)
.style("opacity", .5)
d3.select(this)
.transition()
.duration(200)
.style("opacity", 1)
.style("stroke", "black")
}
let mouseLeave = function(d) {
d3.selectAll(".Country")
.transition()
.duration(200)
.style("opacity", .8)
d3.select(this)
.transition()
.duration(200)
.style("stroke", "transparent")
}
// Draw the map
svg1.append("g")
.selectAll("path")
.data(topo.features)
.enter()
.append("path")
// draw each country
.attr("d", d3.geoPath()
.projection(projection)
)
// set the color of each country
.attr("fill", function (d) {
d.total = data.get(data.total_cases_per_million) || 0;
return colorScale(d.total);
})
.style("stroke", "transparent")
.attr("class", function(d){ return "Country" } )
.style("opacity", .8)
.on("mouseover", mouseOver )
.on("mouseleave", mouseLeave )
})
Вот как выглядит карта, и я не получаю никаких сообщений об ошибках на консоли. Был бы очень признателен, если бы кто-то мог мне помочь!
Вот так выглядит карта, и я не получаю никаких сообщений об ошибках в консоли. Был бы очень признателен, если бы кто-то мог мне помочь!
Обновлено: файл csv выглядит так
iso_code,country,total_cases_per_million
AFG,Afghanistan,2917418.02
ALB,Albania,58135447.4
DZA,Algeria,3715179.438
AND,Andorra,270897098
Я добавил пример того, как выглядит файл csv. Имена такие же
В объекте Карта вы устанавливаете название страны в качестве ключа:
data.set(d.country, +d.total_cases_per_million);
Кроме того, в GeoJSON название страны находится под properties.name
для каждой функции.
Поэтому вот как вы должны заполнить пути:
.attr("fill", function (d) {
d.total = data.get(d.properties.name) || 0;
return colorScale(d.total);
})
Вставленный вами CSV-файл неверен, в нем есть пробелы после цифр, проверьте это.
Наконец, пороговая шкала не является адекватным выбором, тем более что у вас есть только два значения в домене. Вы можете использовать линейную шкалу или, что чаще всего используется в хороплетах, квантиль или шкалу квантования. Вы по-прежнему можете использовать пороговую шкалу, но правильно установите пороги.
Благодарим за ваше предложение! Я внес изменения, и я все еще получаю те же результаты. Возможно, у вас есть другие предложения?
Трудно сказать, не зная, как выглядит
mapdata.csv
. Первое, что мне интересно, это то, соответствует лиd.country
, полученное изmapdata
, полю файла GeoJSONfeatures.properties.name
.