Mouse wheel events

[John Delacour]

 
I have published a slider that rotates a rectangle

<http://bl.ocks.org/JohnDelacour/5629989> -- NOT FOR FIREFOX!

with a view to familiarizing myself with the drag event in D3.

I would like to have the slider also respond to the mouse wheel
and perhaps to clicks below and above the knob. What is the
proper D3 way to do this.

I am making progress with D3, but quite slowly, so any comments
on the code would be welcome. I'm not much bothered that it
doesn't work in Firefox but it would be interesting to know why.

JD

[Tom Herold]

I use a jQuery plugin for mousewheel handling: https://github.com/brandonaaron/jquery-mousewheel

Just attach it to the website body and update your lever on the event handler. Works pretty well. Make sure you dont use "delta" value directly. I am under the impression that the value increases/decrease at a different speed for mice from various manifacturers.

Something like this: (Coffeescript)

    $("body").on "mousewheel", (evt, delta, deltaX, deltaY) =>

      evt.preventDefault()

      if deltaY > 0

        @changeZoomSlider(0.1)

      else

        @changeZoomSlider(-0.1)

------------------------------------------------------------------------------------

  changeZoomSlider : (delta) ->

    $slider = $(".zoom-slider input")

    sliderValue = parseFloat($slider.val())

    $slider.val( sliderValue + delta )