Little Demo for finding the rotation angle of an element animated along a path

http://stackoverflow.com/questions/13364872/is-there-a-way-to-getrotationangleatlengthin-float-distance-similar-to-getpo

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="640px"
   height="480px"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.3.1 r9886"
   sodipodi:docname="fancy_scrollbar.svg">
  <defs
     id="defs2987" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.5494505"
     inkscape:cx="291.82798"
     inkscape:cy="250.93727"
     inkscape:current-layer="layer2"
     inkscape:document-units="px"
     showgrid="false"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:window-width="1918"
     inkscape:window-height="1012"
     inkscape:window-x="1366"
     inkscape:window-y="0"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata2990">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:label="Layer 1"
     inkscape:groupmode="layer" />
  <g
     inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="Layer">
    <path
       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 9.6808511,73.404253 c 3.0626059,0 1.8118879,-0.384837 3.8723409,0.64539 0.43026,0.21513 0.878287,0.397894 1.29078,0.64539 0.665125,0.399075 1.200312,1.045494 1.93617,1.29078 0.612271,0.20409 1.323899,-0.20409 1.93617,0...

CSS

#scrollbar_handle { cursor: pointer; }

CoffeeScript

getPoint = (distance) ->
    sb[0][0].getPointAtLength(distance * sb[0][0].getTotalLength())
sb = d3.select("#scrollbar")
h = d3.select("#scrollbar_handle")
bod = d3.select("body")
upper = getPoint(0)
lower = getPoint(1)
mousedown = false
    
console.log upper
console.log lower
    
getPosHandle = (pos) ->
    relPos = pos.y - upper.y
    if relPos > lower.y then lower
    else if relPos < 0 then upper
    else getPoint relPos / (lower.y - upper.y)
    
h.on "mousedown", () ->
    mousedown = true
h.on "mouseup", () ->
    mousedown = false
d3.select("svg").on "mouseup", () ->
    mousedown = false
bod.on "mousemove", () ->
    if mousedown
         pos = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] }  
         pos1 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] - 4 } 
         pos2 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] + 4 }
         ang = Math.round(Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x) * 180 / Math.PI) - 90
         h.attr "transform", "rotate(#{ang} #{pos.x} #{pos.y})"
         h.attr "x", (pos.x - h.attr("width") / 2)
         h.attr "y", (pos.y - h.attr("height") / 2)

h.attr "x", getPoint(0).x - h.attr("width") / 2
h.attr "y", getPoint(0).y - h.attr("height") / 2