Question

我正在尝试制定互动平面图。当用户悬停房间时，我想显示某种消息。

我的所有平面图都是JPEG格式。我想做这样的事情：http://dciarletta.github.io/d3-floorplan但我还需要在后端创建一个可以创建这些叠加层的工具。

我的问题是，我该怎么做？理想情况下，我只需点击房间来创建叠加层，但我不认为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);
            });

http://jsfiddle.net/5nTEk/

所以，不仅我不认为我得到了正确的坐标，因为我不知道如何添加叠加作为上面的链接......有什么建议吗？

Answer 1

您可以通过在您的<img>上覆盖SVG来实现。 D3会渲染到这个svg面板中。您可以根据用户点击在SVG中创建多边形。

如果您使用d3.event鼠标位置（mouseX和mouseY，我认为），您可以获得相对于SVG元素的点击位置，然后将它们用作顶点位置一个多边形。检查单击原始点的接近程度将允许您决定何时关闭多边形。

使用d3.js（或类似）创建交互式平面图

1 个答案: