使用 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 坐标的主要内容,如果未能解决你的问题,请参考以下文章