Question

我提到了许多与我的问题相关的链接，但它没有引导我达到预期的方式。我提到了这个答案：plot points for image map

我的参考资料js library / demo：http://bl.ocks.org/NPashaP/a74faf20b492ad377312

我打算在我的网站上使用它，但不使用任何国家的地图，我会使用我的建筑物的平面图，这样悬停在任何床上都会产生与现在状态相同的效果。 USA。

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

但我不知道如何创建文件中给出的坐标。任何人都可以指导我的过程吗？我在哪里加载我的布局png？等

我有人工智能用于平面图。

Answer 1

我不认为需要在您的应用中使用D3。如果您有各个房间墙的点位置（x，y），则创建svg多边形。每个多边形都有一个onmouseover和onmouseout事件。请参阅以下基本示例。

＆＃13;

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

＆＃13;

如何在svg中为d3 js map创建坐标

1 个答案: