Javascript 使用d3.js（或类似工具）创建交互式楼层平面

我正在试着做一个交互式的平面布置图。当用户将鼠标悬停在房间上时，我希望显示某种消息

我所有的平面图都是JPEG格式的。 我想这样做：但我还需要在后端制作一个工具来创建这些覆盖

我的问题是，我该怎么做？理想情况下，我只需要在房间里点击一下来创建覆盖，但我认为d3.js不允许这样做。我在获取正确的坐标时也遇到了问题：

$('#floor').click(function(e) {
                var $this = $(this);
                var offset = $this.offset();
                var pos = [];
                pos.x=(e.pageX-offset.left);
                pos.y=(e.pageY-offset.top);
                console.log('x: '+pos.x+'  |  y: '+pos.y);
            });

---

所以，不仅我认为我没有得到正确的坐标，因为我不知道如何添加一个覆盖作为上面的链接。。。有什么建议吗？

您可以将SVG覆盖在

上。D3将渲染到这个svg面板中。可以根据用户的单击在SVG中创建多边形

---

如果使用

d3.event

鼠标位置（

mouseX

和

mouseY

，我认为），可以获得相对于SVG元素的单击位置，然后将它们用作多边形上的顶点位置。检查单击是否接近原始点将允许您决定何时关闭多边形。

t如果能得到一个简单的例子，那该多好啊？如果有人有时间，我将不胜感激（社区也是如此）。