search

denisemauldin / d3-timeline

D3 timeline
BSD 3-Clause "New" or "Revised" License
168 stars 73 forks source link

How to enable vertical scrolling over a stacked timeline? #18

Open alexbfree opened 6 years ago

alexbfree commented 6 years ago

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 commented 6 years ago

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

denisemauldin commented 6 years ago

@alexbfree Do you have example code somewhere?

alexbfree commented 6 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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?

denisemauldin commented 5 years ago

@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?

alexbfree commented 5 years ago

@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.