D3主线插值看起来不对

Question

我尝试使用d3.svg.line().interpolate()选项给出一个使用d3绘制的多边形 - 平滑边缘，但我得到了奇怪的结果。

我从nokia HERE api接收多边形数据作为[lat1, long1, alt1, lat2, long2, alt2 ...]形式的世界坐标数据所以在routingCallback函数中 - 当响应进入时调用 - 我首先对其进行优化，使其看起来像这样{ {1}}。在d3.svg.line（）中，然后我使用这个坐标数组来计算像素位置。我使用Leaflet在地图上绘制多边形，所以我使用map.latLngToLayerPoint()函数来做到这一点。多边形的实际绘制发生在reset（）中，在数据可用后立即从routingCallback调用，每次地图变焦时都会调用

[[lat1, long1], [lat2, long2] ...]

我希望这会产生光滑的边缘，但我会在每个角落都得到一个小环。红色叠加是没有插值的相同多边形。角落处只有点。中间没有添加任何分数。

是否与点的顺序（顺时针/逆时针）有关？我试图重新排列这些点，但似乎没有发生任何事情。

Answer 1

我可以重新创建模式的唯一方法是将每个顶点添加到路径两次。线性插值不会引起注意，但是当程序尝试平滑地连接点时会导致循环。

http://fiddle.jshell.net/weuLs/

修改

仔细查看您的代码，看起来问题出在您的calculateIsolineResponse函数中;我没有在Leaflet API中看到该名称，所以我假设它是自定义代码。你需要调试它来弄清楚你为什么要重复点。

如果您无法更改该代码，那么简单的解决方案就是通过过滤器运行您的点阵列，从而删除重复的点：

refinedData = refinedData.filter(function(d,i,a){
        return ( (!i) || (d[0] != a[i-1][0]) || (d[1] != a[i-1][1]) ); 
     });

如果它是数组中的第一个点，或者lat或lon值与前一个点不同，那么该过滤器将返回true。重复的点将返回false并从数组中过滤掉。