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

how to create co-ordinates in svg for d3 js map

本文关键字：js 地图 创建 坐标 d3 中为 SVG      更新时间：2023-09-26

我参考了许多与我的问题相关的链接，但它们并没有把我引向预期的方向。我参考了这个答案:图像地图的情节点

参考js库/demo: http://bl.ocks.org/NPashaP/a74faf20b492ad377312

我打算在我的网站上使用这个，但不是使用任何国家的地图，而是使用我的建筑物的平面图，这样在任何一个卧室上悬停都会产生与现在在美国各州相同的效果。

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

但是我不知道如何创建文件中给出的坐标。有人能指导我这个过程吗?我在哪里加载布局png ?等。

我有平面图的AI。

我不认为有必要为你的应用程序使用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>

相关文章：