使用 D3.js geom 缩放 voronoi 多边形,结果为 lat long,而不是 px 坐标

Posted

技术标签:

【中文标题】使用 D3.js geom 缩放 voronoi 多边形,结果为 lat long,而不是 px 坐标【英文标题】:Using D3.js geom to scale a voronoi polygon with result in lat long, not coordinates in px 【发布时间】:2017-05-30 02:00:44 【问题描述】:

我正在尝试为 lat/long 中的一组输入点创建 voronoi 多边形。问题是我的输入数据集可以在同一位置包含多个点,因此为该点返回相同的 voronoi 多边形。

我想直观地显示重叠的多边形(每个多边形比前一个略小),以证明在同一点有多个多边形,如下面的屏幕截图所示。

通过阅读文档,您似乎可以缩放投影,但这些投影已经以 px 为单位,而不是我的真实世界纬度/经度值。

那么,如何使用 d3.js-v3 以纬度/经度获取输入多边形并返回缩小 X% 的多边形,输出多边形以纬度/经度为单位?

多边形输入示例:[long1, lat1, long2, lat2, long3, lat3, long4, lat4]

编辑:上面的图像使用“剪辑”功能来剪辑多边形,剪辑半径不断缩小,这为边缘多边形提供了所需的效果,但对内部绑定的多边形没有达到预期的效果。

【问题讨论】:

【参考方案1】:

所以最终解决方案很简单。

var p1 = d3.geom.polygon(polygonArray);
var centroid = p1.centroid();
var newPolygonArray = [];
p1.forEach(function(v, i)   
    var newLong = centroid[0] + (v[0] - centroid[0])*(0.9);
    var newLat = centroid[1] + (v[1] - centroid[1])*(0.9);
    newPolygonArray.push(newLong, newLat);
.bind(this));

我花了很长时间尝试使用 d3 函数和投影来变换、平移和缩放多边形,但是当我那天下班后,我突然意识到我需要做的就是上面的简单数学过程。

教训是当你被困时休息一下,新鲜空气可以让你睁开眼睛。

concentric voronoi polygons

【讨论】:

以上是关于使用 D3.js geom 缩放 voronoi 多边形,结果为 lat long,而不是 px 坐标的主要内容,如果未能解决你的问题,请参考以下文章

D3.js:d3-delaunay - 如何开始?

D3.JS“缩放”未定义

使用canvas和d3.js分层圆结构计算缩放和平移的方法

在 D3.js 中缩放或平移时限制域

如何知道 D3.js 中的当前缩放级别

Javascript / D3.js - 绘制大型数据集 - 提高 d3.js 绘制的 svg 图表中的缩放和平移速度