[Solved]-Update zoom state in d3 v4 after manually setting translation and scale-d3.js

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[0], translate[1]).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.