Mastering the Art of Page Scrolling with d3

Question

Mastering the Art of Page Scrolling with d3

I would like to implement a scrolling effect for my d3 that allows the entire page to scroll while panning, similar to the effect on challonge (http://challonge.com/tournaments/bracket_generator?ref=OQS06q7I5u). However, I only want the scrolling to occur along the y-axis.

Here is my current attempt at achieving this:

pan.call(d3.drag().on("drag", function dragged() {
        // x axis
        thisPosX += d3.event.dx;
        g.attr("transform", "translate(" + thisPosX + ", 0)");
        g1.attr("transform", "translate(" + thisPosX + ", 0)");
        position.x = thisPosX;
        // y axis.
        var tmp = d3.event.dy;
        if (tmp != -lastTmp) {
            $window.scrollTo(0, $window.scrollY - tmp);
            lastTmp = tmp;
        }
}));

However, this code seems to cause lag and some spikes during the panning process. Are there any alternative methods or better ways to achieve this effect? By the way, I am using Angular.

javascript angularjs d3.js

Answer 1

Answer №1

I don't think you need to rely on d3 for what you're attempting to accomplish. While it is possible to bind events using d3, the drag behavior in question is specifically designed for dragging elements within a static container such as a canvas or SVG.

Fortunately, I came across this Codepen example that might serve your needs.

To achieve this, my suggestion would be to wrap your SVG inside a div element that possesses the necessary drag behavior. This approach was taken by Challonge, and you can reference their source code shown below: https://i.stack.imgur.com/DiuGO.png

Next, implement a scroll on drag behavior. To achieve this, I've adapted the previous Codepen example to utilize d3:

var curYPos = 0;
var curDown = false;

var scrollable = d3.select('#scrollable');
scrollable.on('mousemove', function () {
  // Scroll only if mouse button is down
  if (curDown === true){
    // Scroll only along the Y-axis
    // d3.mouse(this) represents the cursor position inside your scrollable element (this)
    window.scrollTo(0, document.body.scrollTop + (curYPos - d3.mouse(this)[1]));
  }
});

scrollable.on('mousedown', function () {
  curDown = true;
  curYPos = d3.mouse(this)[1];
});
scrollable.on('mouseup mouseleave', function () {
  curDown = false;
});

To see a live demonstration of this scroll on drag behavior, you can check out the following Demo.

Answer 2

I don't think you need to rely on d3 for what you're attempting to accomplish. While it is possible to bind events using d3, the drag behavior in question is specifically designed for dragging elements within a static container such as a canvas or SVG.

Fortunately, I came across this Codepen example that might serve your needs.

To achieve this, my suggestion would be to wrap your SVG inside a div element that possesses the necessary drag behavior. This approach was taken by Challonge, and you can reference their source code shown below: https://i.stack.imgur.com/DiuGO.png

Next, implement a scroll on drag behavior. To achieve this, I've adapted the previous Codepen example to utilize d3:

var curYPos = 0;
var curDown = false;

var scrollable = d3.select('#scrollable');
scrollable.on('mousemove', function () {
  // Scroll only if mouse button is down
  if (curDown === true){
    // Scroll only along the Y-axis
    // d3.mouse(this) represents the cursor position inside your scrollable element (this)
    window.scrollTo(0, document.body.scrollTop + (curYPos - d3.mouse(this)[1]));
  }
});

scrollable.on('mousedown', function () {
  curDown = true;
  curYPos = d3.mouse(this)[1];
});
scrollable.on('mouseup mouseleave', function () {
  curDown = false;
});

To see a live demonstration of this scroll on drag behavior, you can check out the following Demo.

Mastering the Art of Page Scrolling with d3

Answer №1

Similar questions

Accessing a precise div element in a webpage

Utilizing Azure SDK to send an email

Sending data using Ajax to the server-side code in ASP.NET

Loading large amounts of data efficiently with Angular and Firebase

How to use AJAX script to call a non-static page method in ASP.NET

Looking for assistance with jqGrid

elevate the div with a floating effect

How to Handle Empty Input Data in JQuery Serialization

In pursuit of increased speed

Comparing Two Arrays in AngularJS and Disabling on Identical Cases

The process of creating a React build varies greatly from the initial development phase

What events precede and follow a keydown action in a Textarea field?

CanvasJS showcasing a variety of pie charts

Guide on how to gather values into a variable from the DOM using jQuery

Obtain the date in ISO format without subtracting the timezone offset

What is the best approach to tackle this design?

What strategies can I use to ensure that I can successfully send 3,000 requests to the Google Drive API using node.js without surpassing

Loading images dynamically in ReactJS allows for a seamless and customized user experience

Using Angular.js version 1.6.9, you can dynamically apply a class based on a condition by utilizing the

It seems that there is a null value being returned in the midst of the