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

Question

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: http://dciarletta.github.io/d3-floorplan 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 = [];
                pos.x=(e.pageX-offset.left);
                pos.y=(e.pageY-offset.top);
                console.log('x: '+pos.x+'  |  y: '+pos.y);
            });

http://jsfiddle.net/5nTEk/

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?

Answer 1

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.