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

Question

我目前正在与 d3.js 合作，主要是想显示一个地球仪，当鼠标悬停在 div 个独立国家/地区时，它会在 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

How to display country names on globe d3.js

javascript

d3.js