Datamap - 根据给定的 x 和 y 坐标检索国家代码
Datamap - retrieve country code based on given x and y coordinates
我正在制作世界地图的可视化,我应该能够根据给定的 x 和 y 像素坐标对从世界地图中检索国家/地区。
目前我正在使用数据映射 (http://datamaps.github.io/)。但是我找不到根据给定的一对 x 或 y 像素坐标检索某个国家/地区名称或 ID 的方法。有人可以指导我正确的方向吗?
提前致谢。
看看标记,您可以看到每个多边形的 CSS class 添加了 3 个字母的国家/地区代码:
class="datamaps-subunit JPN"
所以您需要做的是在您感兴趣的点找到多边形。这个答案 Hit-testing SVG shapes? 可能会帮助您实现这一点。它建议诸如:
svg.getIntersectionList(hitrect, null);
或
document.elementFromPoint(x, y);
一旦你知道了,提取 class 名称就相对简单了:
var code = d3.select(element).class().replace("datamaps-subunit ", "");
我正在制作世界地图的可视化,我应该能够根据给定的 x 和 y 像素坐标对从世界地图中检索国家/地区。
目前我正在使用数据映射 (http://datamaps.github.io/)。但是我找不到根据给定的一对 x 或 y 像素坐标检索某个国家/地区名称或 ID 的方法。有人可以指导我正确的方向吗?
提前致谢。
看看标记,您可以看到每个多边形的 CSS class 添加了 3 个字母的国家/地区代码:
class="datamaps-subunit JPN"
所以您需要做的是在您感兴趣的点找到多边形。这个答案 Hit-testing SVG shapes? 可能会帮助您实现这一点。它建议诸如:
svg.getIntersectionList(hitrect, null);
或
document.elementFromPoint(x, y);
一旦你知道了,提取 class 名称就相对简单了:
var code = d3.select(element).class().replace("datamaps-subunit ", "");