marmelab / EventDrops

A time based / event series interactive visualization using d3.js
http://marmelab.com/EventDrops/
MIT License
1.24k stars 238 forks source link

allow vertical panning for infinite scroll #276

Open sasarivera opened 5 years ago

sasarivera commented 5 years ago

I'm trying to implement and infinite scroll in event drops.

so far, I have the implementation using a button. This button adds the extra data and redraw the chart (after drawing I'm scrolling the page to the previous scroll position)

` const doc = document.documentElement; const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

const data = [ ...repositories, ...newData ]

d3 .select('#eventdrops-demo') .data([data]) .call(chart);

window.scrollTo(0, top); `

this works fine, but I was wondering if I can create a vertical panning to emulate the same functionality?

Busteren commented 5 years ago

Is there a particular reason you want to be able to zoom vertically on the chart? Not sure I see the benefits of it?

The zoom only does it on a horizontal level (x scale);

const newScale = transform.rescaleX(xScale);

You could potentially modify it to allow for zoom on the yScale, but you would have to modify it a bit (something along these lines, where need to pass in the yScale and then apply the new scale);

const newYScale = transform.rescaleY(yScale);

d3 zoom documentation

sasarivera commented 5 years ago

Hi Haakon,

Thanks for your response. I don’t want to zoom vertically, just pan vertically to implement an infinite scroll.

Pretty mucha when the user scroll to the bottom of the chart trigger some even that adds more data (no full rendering to avoid losing the current spot)

Sent from my iPhone

On Sep 14, 2019, at 6:26 AM, Haakon Thor Brunstad notifications@github.com wrote:

Is there a particular reason you want to be able to zoom vertically on the chart? Not sure I see the benefits of it?

The zoom only does it on a horizontal level (x scale);

const newScale = transform.rescaleX(xScale); You could potentially modify it to allow for zoom on the yScale, but you would have to modify it a bit (something along these lines, where need to pass in the yScale and then apply the new scale);

const newYScale = transform.rescaleY(yScale); d3 zoom documentation

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.