使用d3.js（或類似的）創建交互式平面圖

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元素的點擊位置，然後將它們用作多邊形上的頂點位置。檢查點擊接近原始點將允許您決定何時關閉多邊形。