如何在s3中爲d3創建座標js地圖

我提到了許多與我的問題相關的鏈接，但它並沒有讓我意外的發現。我提到這樣的回答：plot points for image map 如何在s3中爲d3創建座標js地圖

我參考JS庫/演示：http://bl.ocks.org/NPashaP/a74faf20b492ad377312

我打算用這個在我的網站，但不是使用任何國家的地圖，我將使用的平面圖我所以在任何一個bedrook上盤旋都會產生和現在在美國一樣的效果。

我注意到，演示使用uStates.js文件：http://bl.ocks.org/NPashaP/raw/a74faf20b492ad377312/3513ad985b2fa93ea35f2fc864cb30540c298171/uStates.js

但我不知道我怎麼創建的文件中給出的座標。任何人都可以引導我的過程？我在哪裏加載我的佈局png？等等。

我有樓層平面圖的AI。

來源

2016-07-04 Jigar Tank

在Illustrator中，儘量節省平面圖爲SVG，那麼它應該給你一些座標（如果你打開一個文本編輯器，SVG），你可以寫新的JSON，類似於uStates.js中的內容。（看起來它可能需要'd'屬性值''元素，而您的平面圖可能會改爲使用''和''等元素代替，在這種情況下，您可能需要在Illustrator中進行一些調整代之以獲得原始路徑。） –

我沒有看到需要爲您的應用程序使用D3。如果您有不同房間牆的點位置（x，y），則創建svg多邊形。每個多邊形都有一個onmouseover和onmouseout事件。請參閱以下基本示例。

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <title>Untitled</title> 
 
</head> 
 
<body> 
 
<svg width=800 height=800> 
 
<polygon name="My Living Room" onmouseover=showMyRoom(evt) onmouseout=hideMyRoom(evt) stroke-width=1 stroke=black fill=maroon points="100,100 100,300 400,300 400,100" /> 
 
</svg> 
 
<div id=roomNameDiv style='box-shadow: 4px 4px 4px #888888;-webkit-box-shadow:2px 3px 4px #888888;padding:2px;position:absolute;top:0px;left:0px;visibility:hidden;background-color:linen;border: solid 1px black;border-radius:5px;'></div> 
 
</body> 
 
<script> 
 
function showMyRoom(evt) 
 
{ 
 
    var room=evt.target 
 
    room.setAttribute("fill-opacity",".8") 
 
    var roomName=room.getAttribute("name") 
 
    var x=evt.clientX 
 
    var y=evt.clientY 
 
    roomNameDiv.style.left=x+20+"px" 
 
    roomNameDiv.style.top=y+30+"px" 
 
    roomNameDiv.innerHTML=roomName 
 
    roomNameDiv.style.visibility="visible" 
 
} 
 
function hideMyRoom(evt) 
 
{ 
 
    var room=evt.target 
 
    room.setAttribute("fill-opacity","1") 
 
    roomNameDiv.style.visibility="hidden" 
 
} 
 
</script> 
 
</html>

來源

2016-07-04 13:39:38

如何在s3中爲d3創建座標js地圖

回答

相關問題