如何使用D3.js在鼠标滚动上移动svg图表

Question

我有两张图表;条形图和文字云。

当我向下滚动时，我希望词云向下移动。有关如何使用D3.js / JavaScript实现此目的的任何想法/示例？

这是我的 DEMO （您应该在单独的窗口中启动预览）。

谢谢！

Answer 1

您可以通过窗口事件侦听器控制DOM元素的位置，如下所示：

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

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

因此，对于用户滚动的每十个像素，scroller元素将移动一个像素。

http://jsfiddle.net/76vd9h3g/

scrollTop here

的跨浏览器实施