过滤d3墨卡托图 [英] filtering d3 mercator map

问题描述

我正在使用 Alan McConchie的块作为d3中的基本墨卡托图.我已经使其在本地工作，但正在尝试过滤地图以排除某些国家(例如南极洲).

我不想简单地将其从json文件中删除，以防万一我需要将其放回原处，而宁愿找到一种无损的解决方案.从我的挖掘中，我认为有一种方法可以基于国家/地区代码使用d3中的以下代码进行过滤，但是无法根据我使用的示例使其工作.我在哪里包括过滤器?在绘制地图之前?数据加载后?

有什么更好的解决方案来消除国家?

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

解决方案

Array.prototype.filter 不能就地过滤:

filter()不会使调用它的数组发生突变.

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

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

这是发生变化的bl.ocks(不再是南极洲):

最后，使用您的代码段...

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

如您所见，问题在于每个国家/地区都将是一条单独的道路，我不确定这是否就是您想要的:Alan McConchie's block for a basic mercator map in d3. I've gotten it to work locally but am trying to filter the map to exclude certain countries (Antarctica for example).

I don't want to simply remove it from the json file in case I ever need to bring it back and would rather find a non-destructive solution. From my digging, I think there is a way to filter using the code below in d3 based on country code but can't get it to work based on the example I'm using. Where do I include the filter? Before the map has been drawn? After the data has loaded?

Any better solutions for removing countries?

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

解决方案

Array.prototype.filter does not filter in-place:

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

You'll have to reassign the value. For instance:

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

Here is the bl.ocks with that change (no Antarctica anymore): http://bl.ocks.org/anonymous/8ef6910d243e4f7a200cd6c231eb44f1/e63d0a10b4629cdee795660c9fc542207d7dc82f

However, this will remove Antarctica from the loaded data. As you want a non-destructive solution, do a deep clone first and then use the filter:

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

Finally, for using your snippet...

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

... which, by the way, works just fine, you'll have to create an "enter" selection:

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

The problem, as you can see, is that each country will be a separate path, and I'm not sure if that's what you want: http://bl.ocks.org/anonymous/ae26c13f2ed863afbb905f598a48a0e3/3d7323cf9f016c0e19aa1c1d876e492715105819

这篇关于过滤d3墨卡托图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！