After long time I found a solution. In my selectFeature function, instead of setting the transform attribute directly, I should update the cached zoom state. The upside of this solution is that this will trigger the zoom event that will update the UI in the zoomed function already set up.
Working example here: https://codepen.io/brunofenzl/pen/zWmoWJ
To update the cached transform, I used the d3.zoomIdentity as stated in the readme
var t = d3.zoomIdentity.translate(x, y).scale(k);
So the modified code in my case is:
this.view.transition() .duration(750) .call( this.zoom.transform, d3.zoomIdentity.translate(translate, translate).scale(scale) );
The downside of this technique is that Extent constraints dont work anymore as expected, so if your extent is less than your new zoom for example, next time you drag or zoom, the zoom will jump to the next possible zoom value allowed by your extent. I solved this for now disabling zoom extent. I hope this helps others.
- Update zoom state in d3 v4 after manually setting translation and scale
- D3 - How to get correct scale and translate origin after manual zoom and pan to country path
- d3 update old scale when pan and zoom
- d3 time scale setting initial zoom level and domain
- How to store zoom state and update incrementally in d3?
- How can I dispatch a 'zoom' event after setting scale (d3, zoom.behavior)
- D3 click coordinates after pan and zoom
- D3 Zoom with Scrollbars used as panning, Scrollbar width and height adjusts to zoom scale
- d3.js pan and zoom jumps when using mouse after programatic zoom
- Map zoom and pan in d3 js v4 + scale limit
- d3.js : attribute setting not working after binding data and entering elements
- SVG returns to its default scale and position after initializing it with specific scale and position
- d3 time scale add before and after time range a percentage of time interval
- Changing time scale from days to weeks, how do I update and sum data values?
- What Transformation values to calculate for scale and translate if you want to zoom
- d3 v4: Clip path not updating after pan and zoom
- Setting ticks on a time scale during zoom
- d3js. Coordinates after zoom and pan. How to calculate it?
- c3js Hide data after legend click and data update
- How to keep current zoom scale and translate level when re-rendering graph
- D3 zoom is not properly reseting zoom state and translated location
- click to zoom and scale bar in d3.js map
- d3.js v4 d3.zoom and strange element order after zoom or pan
- d3 brush and setting minimum tick marks with a time scale
- d3 collapse tree zoom and pan - jumpiness after clicking a node
- application not working after chrome update to version 66 but works in firefox and edge
- d3 scaleLinear update and zoom conflict
- d3 version 4 drag and zoom update
- d3 change scale domain and keep the zoom working as expected
- d3 js with scale and zoom in zoom out
More Query from same tag
- Prevent image rotation into SVG circle on d3 radial tree
- D3 stack() vs nested objects
- D3.JS to create a Stacked Area Chart
- is it prohibited to use transition interval same as redraw interval?
- D3 change Dataset csv
- How to dynamically add circle with label?
- How to create a new array using the data from the old one?
- JSON and D3, Change only children key names but leave parent
- Resize SVG contents based on the result of rendering
- How to make several path elements inherit their stroke from one place?
- Attaching 'onclick' event to SVG element 'rect' after loading
- Uncaught Error: unknown type: dragend in d3.js v5.4.0
- D3 visualization - how to automate button selection
- dc.js pieChart set specific x axis value
- in angular-nvd3 how to Invert donut Chart
- D3.js version3 scale.ordinal() not reading in my data the way I would like
- how can I exclude an element from an Angular scope?
- nvd3 multiBarChart - d3.scale.log
- want to fixed origin in d3 chart
- D3.js Multiple GeoJSON objects
- how to detect mousemove if svg is behind another element
- D3 zoom event firing on drag in Angular
- D3 Area-Chart energy example
- D3.js produces valid SVG but shows nothing
- dc charts look different when building Angular App in production mode
- Inversion with ordinal scale
- D3.js utcParse() returns null
- How to get the background attribute from the nodes of treemap in d3?
- d3.js: Hyphen gets mysteriously eaten when attaching class attribute to path