EventDrops icon indicating copy to clipboard operation
EventDrops copied to clipboard

allow vertical panning for infinite scroll

Open sasarivera opened this issue 6 years ago • 2 comments

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?

sasarivera avatar Sep 06 '19 19:09 sasarivera

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

Busteren avatar Sep 14 '19 10:09 Busteren

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 [email protected] 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.

sasarivera avatar Sep 16 '19 18:09 sasarivera