D3.js 无法将大写字母添加到geojson世界地图

我正在使用d3渲染一张带有可点击国家的世界地图。这些国家来自一个geojson文件，我使用此站点加载特定大陆、地区或整个世界都没有问题：

但是，该站点的数据在geojson文件中没有任何大写字母。所以我看了，这清楚地表明，我们应该能够渲染一个有城市的区域。我把他们的文件转换成geojson，但由于某些原因，我只得到城市，作为空白背景上的单点。我找不到一张地图可以提供首都/城市位于国家边界内的国家的地图

这让我想知道，我是否应该以某种方式将国家的geojson文件与首都的geojson文件相结合，并将一个文件置于另一个文件之上。那么，这怎么可能呢？还是有其他解决办法？我将代码附加到渲染世界地图的位置（效果很好）：

---

我现在有了一个解决方案，将其发布在此处，以防对其他人有所帮助：

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)
    })

---

如何添加城市？您只展示了如何添加国家，这显然是正确加载的。另外，你能分享你的cities文件的一个示例吗？我忘了添加前一行：const data=wait d3.json（“europe.geo.json”），这是添加文件的地方。我可以将文件改为大写之一，但这只会创建一个没有国家首都的地图。我需要将不同文件中的首都和国家呈现到同一个svg元素上，我不知道如何才能做到这一点。您可以使用Promise.all（）一次加载多个CSV：您肯定应该这样组合文件，就像您选择all

.country

，您也可以选择All

.capital

您能为我展示您所描述的最低限度的工作解决方案吗，包括我上面的代码？我是一个新手，上面的代码不是我自己写的。是否可以以相同的方式加载多个json文件（我以前没有遇到过csv）？

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)
    })