score:1
You just need to set your scaleExtent
to the proper values. If "the size of the scale is different every time", just set scaleExtent
using the initial domain values:
var domainStart = new Date('1/1/2017'),
domainEnd = new Date('2/1/2017');
var scale = d3.scaleTime()
.domain([domainStart, domainEnd])
.range([0, width])
...
// max zoom is the ratio of the initial domain extent to the minimum
// unit that you want to zoom to (1 minute == 1000*60 milliseconds)
var zoomMax = (domainEnd.getTime() - domainStart.getTime()) / (1000*60),
zoomMin = 1;
var zoom = d3.zoom()
.scaleExtent([zoomMin, zoomMax])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
Source: stackoverflow.com
Related Query
- How to limit the zoom of a time scale in d3.js to the minute?
- D3js: How do I clear the zoom scale set by the d3.zoom event?
- d3.js - Having a tree layout, how to change the X-axis to use a time scale in D3?
- How to get the boundaries of currently visible time scale (after panning and zooming)?
- How to set a scale for the time series, current x scale gives me NaN?
- How to customize the color scale in a D3 line chart?
- how to know the current Zoom level in D3.js
- How do we change the tick values generated by a linear scale in a d3.js line plot?
- how to set the domain and scale on an axis on a nvd3.js multiBarChart
- How do I specify the initial zoom level in D3?
- how to get the type of a scale in D3?
- How to limit a d3 line-chart from showing the line outside of the range of the axis?
- How to set the domain and scale on an yaxis on a discreteBarChart nvd3.js
- How to make the scale to round to the nearest multiple of #?
- D3.js - how to add zoom button with the default wheelmouse zoom behavior
- D3 - How to get correct scale and translate origin after manual zoom and pan to country path
- How to group by multiple keys at the same time using D3?
- d3 limit zoom level for time axis
- d3 zoom and brush working at the same time
- How to have d3 tickFormat of (day, time) but only show time if day is the same?
- How do I get D3 Data Driven Document to display a moment.js datetime in the correct time zone?
- In D3 zoomable sunburst, how do I make the labeling dependent upon the zoom level?
- How to limit the text of polygons in Voronoi diagram with D3.js?
- How to set the zoom factor in D3.js v.4.x?
- d3 time scale - last bar on graph is appearing outside of the graph
- Map zoom and pan in d3 js v4 + scale limit
- How to show the end scale value in the axis?
- How do I change the speed of the zoom in D3
- D3.js v4 - how to add zoom button with the default wheelmouse zoom behavior
- How do you change the interpolation for a zoom behavior in d3.js
More Query from same tag
- "Restrict" text scaling on zoom chart
- d3 stock value line graph: can't draw the line
- Strange Fill Effect When Rendering Railroad Data in d3
- can“t run d3js example for ionic 2
- Is there a way to access enter and update selections together?
- Crossfilter dimension filtering
- d3 Force Directed Graph General Update Pattern - exit() selection not working
- Weird behaviour of Fisheye Distortion plugin
- jquery error when trying to get window width
- D3.js Set initial zoom level
- How to split multiple D3 transform commands into separate statements
- how to create transition from selection (importing d3-selection module)
- d3.js code from javascript console to html page
- View data in graph from rails
- d3js selection.enter() depends on the order of new added data?
- Create JSON from database query rails
- Three column layout breaks on adding d3js chart
- plot dots on multiple lines in line chart
- How can I make both HTTP and Websocket requests at the same time on the same server?
- Varying the gaps between specific bars in a D3 bar chart
- Angular2 D3 - CSS styling is not applied
- Reset Button for NVD3 Parallel Coordinate Plot
- IE9 detects z-index events different than Chrome/Firefox - how to fix?
- Adding svg:circle elements to a d3.js line
- Show and hide additional element in d3.js
- Using D3 Scales to convert colour to number
- Can't select svg element with d3
- How to pause d3.js simulation using javascript?
- D3 zoomable pack chart update
- Plotting real-time/dynamic data with D3 js