过滤 d3 墨卡托图答案

【问题标题】：filtering d3 mercator map过滤 d3 墨卡托图
【发布时间】：2018-06-22 01:23:24
【问题描述】：

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

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

有更好的删除国家/地区的解决方案吗？

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

【问题讨论】：

标签： javascript d3.js maps geojson

【解决方案1】：

Array.prototype.filter 不会就地过滤：

filter() 不会改变调用它的数组。

您必须重新分配该值。例如：

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

这里是发生这种变化的 bl.ocks（不再是南极洲）：http://bl.ocks.org/anonymous/8ef6910d243e4f7a200cd6c231eb44f1/e63d0a10b4629cdee795660c9fc542207d7dc82f

但是，这将从加载的数据中删除南极洲。由于您想要一个非破坏性的解决方案，请先进行深度克隆，然后使用过滤器：

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

最后，为了使用你的 sn-p...

.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

【讨论】：

@LexiN 您问题中的 sn-p 工作得很好，如果您创建了一个输入选择，该选择在原始块中不存在。再看看我的回答。
@GerardoFurtado感谢您返回和修改！我实际上需要单独的路径，所以这让我很头疼。