score:0

I don't see a need to use D3 for your application. If you have point locations(x,y) for the various room walls, then create svg polygons. Each polygon has an onmouseover and onmouseout event. See the following basic example. 

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


Related Query

More Query from same tag