marmelab/EventDrops

How to get the time range/extent of the current view on zoomend?

sfairgrieve opened this issue · 4 comments

First, let me say that EventDrops is awesome!

I'm not super familiar with D3 zooming behavior, so forgive me if this is easy. I'm trying to write some code in the zoomend event handler that gets the time range/extent of the current view of the EventDrops chart after the user has zoomed in order to use this info. to filter the data that's displayed in other views outside of the EventDrops chart. I see that I can use d3.event.target to get some information, but it's not obvious how to translate that information into a date range. I'm assuming there's a scaling function that's used by EventDrops to translate x coordinates into date values, but I'm not sure of the easiest way to access that in order to produce date values. Any help you can provide would be greatly appreciated!

The documentation suggests that a zoomend relays the d3.scale (from which one could get the limits) to the specified function, but it is actually relaying the datum (and that includes all data).

However, I discovered that you can scrape the extent from the extremum values displayed (usually) above the chart.

.zoomend(zoomEnd)

var zoomEnd = function(){
	var format1 = d3.time.format("%d %B %Y");
	var min = d3.select(".minimum").text(); //might need a more restrictive select, YMMV
	var max = d3.select(".maximum").text();
	console.log(format1.parse(min));
	console.log(format1.parse(max));
}

You could then filter the data to be within those bounds.

@bmasch thanks for the help! I'll give this a try.

For information, I just opened a PR (still work to do on it yet) which may solve your needs: #151

In last version (1.x), you can retrieve current displayed time range using chart.scale(), as shown on the demo.

Be careful: 1.0 version brought several breaking changes. To get an overview of what's new in this new version, take a look on our blog post.