我正在尝试使用 d3 绘制地图，并且我正在从 json 文件中提取数据，但它不起作用。下面是我的 script.js

Question

let countyURL = 'https://raw.githubusercontent.com/deldersveld/topojson/master/countries/nigeria/nigeria-states.json'


let countyData

let canvas = d3.select('#canvas')
let tooltip = d3.select('#tooltip')

let drawMap = () => {
 
    canvas.selectAll('path')
            .data(countyData)
            .enter()
            .append('path')
            .attr('d', d3.geoPath())
            .attr('class', 'county')
           
}

d3.json(countyURL).then(
    (data, error) => {
        if(error){
            console.log(log)
        }else{
            //countyData = topojson.feature(data, data.objects.counties).features
            countyData = topojson.feature(data, data.objects.NGA_adm1).features
            console.log(countyData)
            drawMap()
        }
    }
)

我创建了一个我调用的drawmap()函数，但地图没有出现 我不知道我的引用是否有任何错误（data.objects.NGA_adm1）

这是我的地图数据源（“https://raw.githubusercontent.com/deldersveld/topojson/master/countries/nigeria/nigeria-states.json”）

如果我能得到任何帮助，我将非常感激

Answer 1

让我们一步步分解问题：

1. 加载数据：使用D3的

   d3.json()

   时，错误是第一个参数，数据是回调中的第二个参数。您当前的顺序是相反的。这可能会导致问题。

2. 数据参考：您提供的 URL 指向尼日利亚各州的 topojson 文件。我们需要确保在尼日利亚各州的 topojson 中引用正确的对象。

3. 样式和投影：您正在附加路径，但您可能需要应用投影来正确定位和缩放地图，具体取决于 SVG 的尺寸。此外，如果默认填充和描边不可见，您可能需要提供一些样式来查看地图。

我修改了你的代码，它在这里：

let countyURL = 'https://raw.githubusercontent.com/deldersveld/topojson/master/countries/nigeria/nigeria-states.json';

let countyData;
let canvas = d3.select('#canvas');
let tooltip = d3.select('#tooltip');

// Define a projection (this might need adjustments)
let projection = d3.geoMercator()
    .scale(1000)
    .center([8, 10]);  // Roughly centering Nigeria

let drawMap = () => {
    canvas.selectAll('path')
        .data(countyData)
        .enter()
        .append('path')
        .attr('d', d3.geoPath().projection(projection))
        .attr('class', 'county')
        .attr('fill', 'none')  // Add some styling to make it visible
        .attr('stroke', 'black');
}

d3.json(countyURL).then(
    (error, data) => {
        if (error) {
            console.log(error);
        } else {
            countyData = topojson.feature(data, data.objects.NGA_adm1).features;
            console.log(countyData);
            drawMap();
        }
    }
);

在修订后的代码中，修复了

error

回调中

data

和

d3.json

参数的顺序。 此外，还为地图定义了一个投影 (

d3.geoMercator()

)，大致以尼日利亚为中心。根据需要调整比例和中心以适合您的画布。 样式属性（

fill

和

stroke

）已添加到路径中以提高可见性。

完成这些更改后，应该会渲染地图。如果仍然无法正确显示，您可能需要调整投影的比例和中心或 SVG 画布的大小和视图框，以确保地图适合可视区域。