javascript - 可交互/可点击的 HTML 图像图

Question

我想显示一个类似于下图的图表。我希望节点(A、B、C、...)可以点击，并且我可以显示一个小的弹出菜单，让用户可以选择他们想要做什么。

我知道我可以用 Canvas 显示类似的东西，但根据我的理解，我必须计算出每个节点(可能有 50 多个)的坐标来编写点击函数。

我只是在寻找使用标准 html、css、js 或使用库(如果使用库，我需要图形在移动设备上可平移和交互)的方法来实现此目的的方向。

Answer 1

我会用 Canvas 来做这个。你肯定知道你把信放在哪里了。每当你放一个字母时，只需存储它的坐标并实现一个函数，该函数会告诉你给定的 X、Y 对是否在给定字母的矩形内。假设你存储了一个字母数组，其中有 startX、startY、endX、endY 成员，那么你可以这样做:

function isInRectangle(letter, x, y) {
    return ((x >= letter.startX) && (y >= letter.startY) && (x <= letter.endX) && (y <= letter.endY));
}

function getClickedLetter(letters, x, y) {
    for (var letter of letters) if (isInRectangle(letter, x, y)) return letter;
    //by default returns undefined
}