如何在地球 d3.js 上显示国家名称

Question

我目前正在使用 d3.js 并且基本上想要显示一个地球，当将鼠标悬停在各个国家/地区时会在 div 中显示名称。 但目前我无法分别输出名称，我不知道如何访问这些名称，因此我可以在鼠标悬停时输出它们。

我在这里需要考虑什么？ 我想从 csv 文件中输出国家名称。

这是我的地球仪：

 // The svg const svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // 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([100000, 1000000, 10000000, 30000000, 100000000, 500000000]) .range(d3.schemeBlues[8]); // Load external data and boot Promise.all([ d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"), d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { data.set(d.code, +d.pop) })]).then(function(loadData){ let topo = loadData[0] let mouseOver = function(d) { d3.selectAll(".Country") .style("opacity", .5) d3.select(this) .style("opacity", 1) .style("stroke", "black") } let mouseLeave = function(d) { d3.selectAll(".Country") .style("opacity", .8) d3.select(this) .style("stroke", "transparent") } // Draw the map svg.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(d.id) || 0; return colorScale(d.total); }) .style("stroke", "transparent") .attr("class", function(d){ return "Country" } ) .style("opacity", .8) .on("mouseover", mouseOver ) .on("mouseleave", mouseLeave ) })

 <!DOCTYPE html> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v6.js"></script> <!-- Create an element where the map will take place --> <svg id="my_dataviz" width="400" height="300"></svg>

Answer 1

一种方法是将 CSV 名称推送到 geoJSON 对象中。 例如：

loadData[1].forEach(row => {
    const foundGeometry = loadData[0].features.find(e => e.id === row.code);
    if (foundGeometry) foundGeometry.properties.countryName = row.name;
});

然后，假设您有一个 div，只需执行以下操作：

div.html(d.properties.countryName);

请注意这是 D3 v6，因此数据需要是mouseOver函数中的第二个参数：

let mouseOver = function(event, d) {

这是您进行这些更改的代码：

 // The svg const svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); const div = d3.select("#mydiv"); // 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([100000, 1000000, 10000000, 30000000, 100000000, 500000000]) .range(d3.schemeBlues[8]); // Load external data and boot Promise.all([ d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"), d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { data.set(d.code, +d.pop); return d; }) ]).then(function(loadData) { let topo = loadData[0]; loadData[1].forEach(row => { const foundGeometry = loadData[0].features.find(e => e.id === row.code); if (foundGeometry) foundGeometry.properties.countryName = row.name; }); let mouseOver = function(event, d) { div.html(d.properties.countryName) d3.selectAll(".Country") .style("opacity", .5) d3.select(this) .style("opacity", 1) .style("stroke", "black") } let mouseLeave = function(d) { div.html(null) d3.selectAll(".Country") .style("opacity", .8) d3.select(this) .style("stroke", "transparent") } // Draw the map svg.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(d.id) || 0; return colorScale(d.total); }) .style("stroke", "transparent") .attr("class", function(d) { return "Country" }) .style("opacity", .8) .on("mouseover", mouseOver) .on("mouseleave", mouseLeave) })

 #mydiv { height: 1.2em; }

 <!DOCTYPE html> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v6.js"></script> <!-- Create an element where the map will take place --> <div id="mydiv"></div> <svg id="my_dataviz" width="400" height="300"></svg>

如何在地球 d3.js 上显示国家名称

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-05-12 13:15:01

如何在地球 d3.js 上显示国家名称

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-05-12 13:15:01

解决方案1
2 已采纳 2022-05-12 13:15:01