CODEWITHSUNDEEP
javascriptsvgd3.jsscroll
supaplex
supaplex

Reputation: 157

How to move svg chart on mouse scroll with D3.js

I have two charts; bar chart and word cloud.

I would like word cloud to move down as I scroll down. Any ideas/examples on how to achieve this with D3.js / JavaScript?

Here is my DEMO (You should launch the preview in separate window).

Thanks!

Upvotes: 0

Views: 1306

Answers (1)

Daniel Lizik
Daniel Lizik

Reputation: 3144

You can control the positioning of a DOM element through a window event listener like this:

  window.addEventListener("scroll", myFunc.bind(this, document.getElementById("scroller")), false);

  function myFunc(div) {
      var scroll = document.body.scrollTop;
      div.style.top = (scroll / 10)+"px";
  };

So for every ten pixels the user scrolls, the scroller element will move one pixel.

http://jsfiddle.net/76vd9h3g/

Cross browser implementation of scrollTop here

Upvotes: 1

Related Questions