如何在 svg 中为 d3 js 地图创建坐标答案

【问题标题】：how to create co-ordinates in svg for d3 js map如何在 svg 中为 d3 js 地图创建坐标
【发布时间】：2016-07-04 06:38:36
【问题描述】：

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

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

我打算在我的网站上使用它，但我不会使用任何国家/地区的地图，而是使用我的建筑物的平面图，以便将鼠标悬停在任何卧室上都会产生与现在在各州相同的效果美国。

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

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

我有用于平面图的 AI。

【问题讨论】：

在 Illustrator 中，尝试将平面图保存为 SVG，然后它会为您提供一些坐标（如果您在文本编辑器中打开 SVG），您可以为其编写新的 JSON，类似于uStates.js。（看起来它可能需要 <path> 元素的 d 属性值，而您的平面图可能改为使用 <rect> 和 <polygon> 以及此类元素，在这种情况下，您可能需要在 Illustrator 中进行一些修改获取原始路径。）

标签： javascript d3.js svg

【解决方案1】：

我认为您的应用程序不需要使用 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>

【讨论】：