Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does zoom.scaleExtent() do in d3.js?

I have created the d3 time axis,

//minDate and maxDates are javascript date object.
var timeScale =d3.scaleTime().domain([minDate,maxDate]).range(
                [0, width]);
var timeAxis = d3.axisBottom(timeScale);

And i have added the zoom interaction to this axis

//gX is group div that has timeAxis.
gX.call(d3.zoom(timeScale).scaleExtent([0,4]).on("zoom",function(d){
    //Do something.
}))

but initially i want to set the zoom level of the axis in day level,default it is showing in hour level,So finally what i am curious is,

  1. How to limit the zooming boundary between years level and min zoom level to day level?
  2. what does numbers [0,4] represent in scaleExtent([0,4]) in zooming?
like image 968
Manjunath M Avatar asked Aug 18 '16 08:08

Manjunath M


2 Answers

From what i understand it's the times factor of the zoom. 4 would be mean: magnified 4 times.

like image 94
Radu Andrei Avatar answered Oct 15 '22 00:10

Radu Andrei


I know this is 4 years old post. Back then were there no documentation? This seems to explain pretty thoroughly.

[k0, k1] where k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor, and returns this zoom behavior. If extent is not specified, returns the current scale extent, which defaults to [0, ∞]. The scale extent restricts zooming in and out.

like image 25
Shintaro Takechi Avatar answered Oct 14 '22 22:10

Shintaro Takechi