首页  >  问答  >  正文

用D3创建地图但国家数据没有出现

我已经从 topojson 使用 D3 创建了一张地图,但在 html 中,国家/地区的数据尚未显示。

大家好!

我已经从 topojson 文件中使用 d3 生成了欧洲地图。 这是我的代码

const svg =d3.select('body').append('svg').attr('width', width).attr('height', height);

const projection = d3.geoMercator().scale(600).center([13.439235,48.830666])
.translate([width / 2, height / 2]); // translate map to svg;

const path=d3.geoPath(projection);
const g = svg.append('g');

d3.json('./europe.topojson')
.then(data =>{
  const countries = topojson.feature(data, data.objects.europe);
  console.log(countries);
  g.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('d', path);

topojson 文件是这样的:

{"type":"Topology","objects":
{"europe":
{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon",
"properties":{"NAME":"Azerbaijan"},"id":"AZ","arcs":[[[0,1,2]],[[3]],[[4]],[[5,6,7,8,9,10],[11]]]},
{"type":"Polygon","properties":{"NAME":"Albania"},"id":"AL","arcs":[[12,13,14,15,16,17,18]]},
{"type":"MultiPolygon","properties":{"NAME":"Armenia"},"id":"AM","arcs":[[[-12]],[[19,-3,20,21,-7],[-5],[-4]]]},
{"type":"Polygon","properties":{"NAME":"Bosnia and Herzegovina"},"id":"BA","arcs":[[22,23,24,25,26,27,28,29,30,31]]},

...

-并且适用于所有国家/地区-

地图显示在我的浏览器中,但没有数据属性(名称、id)。

当我 console.log(countries) 时,控制台会打印来自 topojson 的数据,例如 name 、 id 等。 这是来自控制台的:

0
: 
{type: 'Feature', id: 'AZ', properties: {…}, geometry: {…}}
1
: 
{type: 'Feature', id: 'AL', properties: {…}, geometry: {…}}
2
: 
{type: 'Feature', id: 'AM', properties: {…}, geometry: {…}}
3
: 
{type: 'Feature', id: 'BA', properties: {…}, geometry: {…}}

你有什么想法吗?

P粉285587590P粉285587590180 天前295

全部回复(1)我来回复

  • P粉242535777

    P粉2425357772024-04-03 09:36:23

    目前尚不清楚您希望在哪里看到每个功能的属性。在您共享的代码中,您从未使用过该数据。

    如果您想要的只是一些标签,您可以按照此示例进行操作

    https://observablehq.com/@rahulbot/us-map-with -标签

    回复
    0
  • 取消回复