如何在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。

在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>

如何在s3中为d3创建坐标js地图

相关推荐