Cornwell Cornwell - 2 months ago 37x
Javascript Question

Creating interactive floor plan using d3.js (or similar)

I'm trying to make an interactive floor plan. When the user hovers a room I want to display some sort of message.

All my floor-plans are in JPEG format.
I would like to make something like this: but I need to also make a tool in the backend that would create those overlays.

My questions is, how can I do it? Ideally I would just click around the room to create the overlay, but I don't think d3.js allows it. I'm also having a problem getting the correct coordinates:

$('#floor').click(function(e) {
var $this = $(this);
var offset = $this.offset();
var pos = [];
console.log('x: '+pos.x+' | y: '+pos.y);

So, not only I don't think I'm getting the correct coordinates as I don't know how to add an overlay as the link above... Any suggestions?


You can probably do it by overlaying an SVG over your <img>. D3 would render into this svg panel. You can create a polygon in the SVG based on the user clicks.

If you use the d3.event mouse locations (mouseX and mouseY, I think), you can get click positions relative to the SVG element, and then use those as vertex locations on a polygon. Checking for click proximity to the original point will allow you to decide when to close the polygon.