I think there's a few problems here.
handleZoom repeatedly registers
this.zoom on every zoom event. This is not necessary; the caller only needs to be registered once. This might be part of the reason that after zooming several times, the behaviour gets more extreme (as each zoom event is effectively being performed many times).
configScale but not
yScale. The call to
this.zoom.y binds d3's zoom to automatically update the domain of whatever is provided; we don't want to change the domain of the configScale but we do want to change the yScale domain.
Finally, it might be simpler to remove the double scaling and instead do an equivalent calculation on the data before giving it to the graph. This would simplify all your logic quite significantly.
Additionally, I found the approach of storing the zoom as the viewport bounds to be a little strange; consider storing the d3 zoom
transform instead (and applying the transform when drawing the lines and axes).
- d3: zoom on double y scale broken
- D3 - Setting the zoom scale of Double Click
- How to disable double click zoom for d3.behavior.zoom?
- D3js: How do I clear the zoom scale set by the d3.zoom event?
- Scale / Redraw d3.js gridlines on zoom / drag
- D3 - How to get correct scale and translate origin after manual zoom and pan to country path
- D3 Zoom with Scrollbars used as panning, Scrollbar width and height adjusts to zoom scale
- How to limit the zoom of a time scale in d3.js to the minute?
- d3 update old scale when pan and zoom
- D3.js zoom with Ordinal axis not working - Issue with setup of scale in zoom behavior?
- Matching leaflet zoom level with d3 geo scale
- Map zoom and pan in d3 js v4 + scale limit
- d3 zoom with button and double click but don't zoom with with scroll wheel
- In D3, How to disable double click zoom conditionally?
- D3.js scale initial zoom level
- What Transformation values to calculate for scale and translate if you want to zoom
- D3 Initial Zoom with default mercator projection scale
- Setting ticks on a time scale during zoom
- Update zoom state in d3 v4 after manually setting translation and scale
- How to keep current zoom scale and translate level when re-rendering graph
- How can I get a SVG path shape to scale on zoom in D3?
- click to zoom and scale bar in d3.js map
- force layout save zoom scale in the session: d3.event.scale
- d3 zoom in on svg on click, zoom out on next double click
- d3 time scale setting initial zoom level and domain
- How to ignore d3.js zoom behavior if scale is maxed/minimal?
- d3 zoom behavior. Increasing the scale in small increments
- d3js v4: Scale circles with zoom
- I want to zoom to a circle directly in d3js without clicking or double clicking it but programmatically
- d3 change scale domain and keep the zoom working as expected
More Query from same tag
- svg element layer / overlap / overlay / superimposition
- Null trapezoid in d3.js funnel chart
- using flexigrid for touch screens
- How do I use event listeners to swtich my d3 bar chart where I only see one and not both?
- Change color of marker-end on mouseover
- Zooming or scaling with d3.js
- SVG - rotate <text> in relation to <rect>
- Referencing the D3.js library from my webpage
- How can I add images in the nodes of a D3 Sankey diagram, using the rcv and networkD3 packages in R?
- Set the percentage of animation in a transition of an element (forward, backward) using a slider
- media queries not working on dc.js chart
- d3js importing to angular2
- Use generated json object instead d3.json
- d3 creating path for each object in array, instead of using each objects x and y properties
- ng-click won't work when added inside html template in controller angular.js
- Add a border to the slices of a pieChart in dc.js + labelColors
- d3js: `xlink:href` is not working
- D3 tooltip show values from nested dataset
- SVG curve to many small straight lines
- D3.horizon Chart not rendering
- Simple bar chart in d3.js
- D3js Performance issue
- How do I create a border with gradiant opacity in CSS ?
- Microstrategy Using a visualization as a selector D3 costum chart
- Changing the line style in d3js for every segment?
- How to get background color of SVG converted properly into Canvas
- Can D3.js fetch in data using "whitespace" separated values?
- How to add different shape marker in d3?
- D3.js Highlighting links on node selection
- How to update entire dataset without breaking existing enter/exit bindings?