无法将首都添加到 geojson 世界地图

Question

我正在使用 d3 渲染带有可点击国家的世界地图。这些国家来自一个 geojson 文件，使用这个网站，我可以毫无问题地加载一个特定的大陆、地区或整个世界： https://geojson-maps.ash.ms/

但是，该站点的数据在其 geojson 文件中没有任何大写字母。因此，我查看了 https://www.naturalearthdata.com/, which clearly shows that one should be able to render a region with cities on it. I take their files and convert them to geojson via https://mapshaper.org/，但出于某种原因，我只得到城市，作为空白背景上的单个点。我找不到一张地图可以提供国家边界内 capitals/cities 的国家/地区地图。

这让我想知道我是否应该以某种方式将国家/地区的 geojson 文件与首都的 geojson 文件结合起来，并在另一个之上呈现一个。那样的话，怎么可能呢？或者还有其他解决方案吗？我附上渲染世界地图的代码（效果很好）：

const data = await d3.json("world.geo.json")

var topology = topojson.topology({ foo: data });

const countries = topojson.feature(topology, topology.objects.foo).features

let targetCountries = countries
selectCountry()

svg.selectAll(".country")
    .data(countries) /* binder selectAll till enter() */
    .enter().append("path")
    .attr("class", "country")
    .attr("d", path)
    .on("mouseover", function (d) {
        d3.select(this).classed("targeted", true)
    })
    .on("mouseout", function (d) {
        d3.select(this).classed("targeted", false)
    })

Answer 1

我现在有一个解决方案，将其张贴在这里以防对其他人有帮助：

const data = await Promise.all([d3.json("world.geo.json"), d3.json("capitals_0yl.json")])

var topology = topojson.topology({ foo: data[0], bar: data[1] });

const countries = topojson.feature(topology, topology.objects.foo).features
const cities = topojson.feature(topology, topology.objects.bar).features

let combined = d3.merge([countries, cities])

svg.selectAll(".country")
    .data(combined) /* binder selectAll till enter() */
    .enter().append("path")
    .attr("class", "country")
    .attr("d", path)
    .on("mouseover", function (d) {
        d3.select(this).classed("targeted", true)
    })
    .on("mouseout", function (d) {
        d3.select(this).classed("targeted", false)
    })

无法将首都添加到 geojson 世界地图

Cannot add capitals to geojson world map

geography

geojson

d3.js

topojson