javascript - 过滤 d3 墨卡托 map

Question

我正在使用 Alan McConchie's d3 中的基本墨卡托 map block 。我已经让它在本地工作，但我试图过滤 map 以排除某些国家(例如南极洲)。

我不想简单地从 json 文件中删除它以防万一我需要将它取回并且宁愿找到一个非破坏性的解决方案。根据我的挖掘，我认为有一种方法可以根据国家代码在 d3 中使用下面的代码进行过滤，但无法根据我正在使用的示例使其工作。我在哪里包括过滤器？在绘制 map 之前？数据加载后？

有没有更好的删除国家的解决方案？

.data(geo_data.features.filter(d => d.id !== "ATA))

Answer 1

Array.prototype.filter不就地过滤:

filter() does not mutate the array on which it is called.

您必须重新分配值。例如:

geojson.features = geojson.features.filter(d => d.id !== "ATA");

这是经过更改的 block (不再是南极洲):http://bl.ocks.org/anonymous/8ef6910d243e4f7a200cd6c231eb44f1/e63d0a10b4629cdee795660c9fc542207d7dc82f

但是，这将从加载的数据中删除南极洲。因为你想要一个非破坏性的解决方案，所以先做一个深度克隆，然后使用过滤器:

var filteredGeojson = JSON.parse(JSON.stringify(geojson));
filteredGeojson.features = filteredGeojson.features.filter(d => d.id !== "ATA");

最后，为了使用您的代码片段...

.data(geojson.features.filter(d => d.id !== "ATA"))

... 顺便说一句，它工作得很好，你必须创建一个“输入”选择:

svg.selectAll(null)
    .data(geojson.features.filter(d => d.id !== "ATA"))
    .enter()
    .append("path")
    .attr("d", function(d){
        return path(d)})
    });

如您所见，问题在于每个国家/地区将是一条单独的路径，我不确定这是否是您想要的:http://bl.ocks.org/anonymous/ae26c13f2ed863afbb905f598a48a0e3/3d7323cf9f016c0e19aa1c1d876e492715105819