d3-timeline icon indicating copy to clipboard operation
d3-timeline copied to clipboard

How to enable vertical scrolling over a stacked timeline?

Open alexbfree opened this issue 6 years ago • 7 comments

Hi, I have quite a tall stacked chart (approx 25 bars) and am finding that the scroll wheel/trackpad-two-fingers movement to scroll down vertically and see the rest of the chart will not work when the mouse pointer is over the chart (but will work when I am over other parts of the page).

I was able to get left-right scrolling working by setting the chart width to greater than the svg width, however the same thing does not seem to work vertically.

Can you advise how this can be achieved?

Thanks Alex

alexbfree avatar Oct 02 '18 17:10 alexbfree

@denisemauldin Just wondered if you are able to assist with this?

alexbfree avatar Oct 23 '18 08:10 alexbfree

@alexbfree Do you have example code somewhere?

denisemauldin avatar Oct 23 '18 15:10 denisemauldin

@denisemauldin Thanks for your reply - when I am back on this project next week I will set up a jsfiddle or gist and post here again.

alexbfree avatar Oct 25 '18 19:10 alexbfree

Hi @denisemauldin. Sorry for the delay - am returning to this after a few months.

I have modified one of your example files to illustrate the problem.

Here is the source file: https://gist.github.com/alexbfree/a363160784517b804e4e22effeb3f550 Just drop this into your repo's example directory and load it, then reduce your browser window size to be quite small and try scrolling.

Notice that when I scroll left and right, it works fine: scrolling left and right

When I scroll up and down near the timeline (but not over it), it works: scrolling up and down next to chart

But when I try and scroll up and down while hovering over the chart, it doesn't work, only ultimately when I move back out from being over the chart: scrolling up and down over chart

Any advice is appreciated.

BTW there is also a secondary issue in this example, in that bars beyond the fifth one are invisible, but that is not a critical issue, if you do know what is causing that I would be interested!

alexbfree avatar Jan 09 '19 09:01 alexbfree

@denisemauldin I realise I am in no position to ask for a speedy response! but just wondered if you had seen this and if you have any thoughts or ideas how to resolve it?

alexbfree avatar Jan 21 '19 13:01 alexbfree

@alexbfree I'm not sure really how to fix it. The ability to scroll left and right on the timeline is bound to the mouse wheel when you're over the timeline on purpose, otherwise you can't scroll the timeline window at all. I don't know how one would tell if the user wants to scroll the page up and down or scroll the timeline left or right. What are your thoughts?

denisemauldin avatar Jan 21 '19 17:01 denisemauldin

@denisemauldin

Oh, I guess the question reads differently when considered from the perspective of a single direction trackwheel which only has one direction of scrolling.

Try it on a trackpad (two finger scroll on Mac) or multi-directional mouse (such as Apple Mighty Mouse/Magic Mouse) and you will see the issue. Up-down movement does nothing at all when hovering over the chart.

I agree that if there is only one direction of scrolling available, that left-right timeline scroll is a sensible default. But this shouldn't be the case with multi-directional scrolling.

I suspect whatever is mapping up-down to left-right is also blocking the up-down scroll on a multi directional mouse from being recognised.

Perhaps one option is to provide a configuration option as to whether that remapping of up-down to left-right is done or not?

Or perhaps you can direct me to the point in the code where that mapping is done, I could then fork and edit it myself.

alexbfree avatar Jan 30 '19 13:01 alexbfree