在 D3 中使用投影进行动态简化答案

【问题标题】：Dynamic simplification with projection in D3在 D3 中使用投影进行动态简化
【发布时间】：2014-07-21 08:35:31
【问题描述】：

我正在使用 d3.geo.mercator() 投影使用 D3 绘制 SVG 地图。

我还对地图使用了缩放行为，它将transform 应用于保存地图所有路径的<g> 对象。

在查看 Mike Bostock (http://bl.ocks.org/mbostock/6252418) 的动态简化示例后，我想知道是否可以在我的案例中应用这样的算法来在缩小几何时用更少的点重绘几何？

在我见过的所有示例中，有一个 simplify 函数跳过可忽略的点并按原样绘制其余点，该函数用于 var path = d3.geo.path().projection(simplify)。我不能那样使用它，因为我需要将它应用到已经存在的 projection = d3.geo.mercator().scale(*).translate([*,*]) 之上。

我应该如何对现有投影使用动态简化？

【问题讨论】：

标签： javascript d3.js topojson

【解决方案1】：

根据你引用的例子，Dynamic Simplification II

simplify 函数类似于

var simplify = d3.geo.transform({
  point: function(x, y, z) {
    if (z >= area) {
        this.stream.point(x, y);
    }
  }
});

其中area 是一个阈值变量，您可以预先设置或根据缩放进行动态修改。

然后你会在d3.geo.path()的projection方法上使用它

var path = d3.geo.path()
    .projection(simplify);

这或多或少是您在回答中描述的情况。现在，根据Dynamic Simplification IV，投影方法也可以定义为

var path = d3.geo.path()
    .projection({
        stream: function(s) { 
            return simplify.stream(s); 
        }
     });

这和以前完全一样。它只是“扩展”默认方法。 d3.geo.path 始终调用投影stream 方法，因此您可以声明自己的流并将其转发给simplify.stream。

现在，您说您需要使用 d3.geo.mercator() 重新投影您的路径。

var mercatorProjection = d3.geo.mercator().scale(*).translate([*,*]);

没问题：流是可链接的。你可以这样做：

var path = d3.geo.path()
    .projection({
        stream: function(s) { 
            return simplify.stream(mercatorProjection.stream(s)); 
        }
     });

还有：

var path = d3.geo.path()
    .projection({
        stream: function(s) { 
            return mercatorProjection.stream(simplify.stream(s)); 
        }
     });

唯一的区别是，如果您处理的是 WGS84、像素或其他坐标系，则必须以不同的方式计算阈值区域。

重要警告，simplify 函数中的 z 参数不是海拔高度。它是the area of the triangle defined by each point，这是一个预先计算的值，它是 TopoJSON 甜度的一部分。

恐怕这意味着你不能依靠这个例子来简化常规的 geoJSON。您必须添加自己的逻辑来计算每个点的相关区域（如果要应用 Visvalingam's algorithm）或到最近点的距离（如果要应用 Douglas-Peucker 算法）或实现自己的算法。

祝你好运。

【讨论】：