search

bizweekgraphics / swoopyarrows

swoopyarrows makes swoopy arrows between things
http://bizweekgraphics.com/swoopyarrows
The Unlicense
106 stars 7 forks source link

Is it possible to draw arrows between divs? #32

Open urcades opened 8 years ago

urcades commented 8 years ago

Hi!

I scanned through the documentation super quickly, and while I understood that in true canvas sense, drawing from coordinate to coordinate was possible, I wanted to ask if it's possible to draw lines between various DOM nodes.

I'm thinking like:

<div id="A">I want to draw a line from this</div> 
<div id="B">to this</div> 
svg.append("path")
  .attr('marker-end', 'url(#arrowhead)')
  .datum([[#A],[#B]])
  .attr("d", swoopy);

Obviously this is really shitty shorthand, but I'm curious if this is possible, or could be made to be possible.

Thanks!

1wheel commented 8 years ago

Definitely possible - you'd want to look up the position of the two divs, translate their corners to the svg coordinate space, then pass those positions to swoopy.

I think @tophtucker did something similar here:

www.bloomberg.com/features/2016-how-did-i-get-here/gert-boyle.html

http://www.bloomberg.com/features/2016-how-did-i-get-here/js/arrowConnector.js