title: Update zoom state in d3 v4 after manually setting translation and scale
body: <p>This has probably been asked many times but as a bloody noob in d3 I could not get a clear solution.</p>
  
  <p>I have a map with points spread on it. When I click a point I want to zoom and pan to it. So far so good but when I try to drag and or zoom it again, it reset's to zoomIdentity not keeping the values I set manually.</p>
  
  <p>EDIT: here is a working demo: <a href="https://codepen.io/brunofenzl/pen/pLxbjZ" rel="nofollow noreferrer">https://codepen.io/brunofenzl/pen/pLxbjZ</a></p>
  
  <p>The relevant parts of my code:</p>
  
  <pre><code>// zoom initialization
  this.zoom = d3.zoom()
        .scaleExtent([1, 2])
        .translateExtent([[0, 0], [width, height]])
        .on('zoom', this.zoomed);
  
  
  
  // zoom listener
  
  Map.prototype.zoomed = function zoomed() {
      if (d3.event) {
        this.view.attr('transform', d3.event.transform);
      }
    }
  
  
  // the function that zooms in
    Map.prototype.selectFeature = function selectFeature(el) {
  
      this.active = d3.select(el);
  
      const bounds = this.active.node().getBBox();
  
      const dx = bounds.width;
      const dy = bounds.height;
      const x = bounds.x + (bounds.width / 2);
      const y = bounds.y + (bounds.height / 2);
  
      const scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / this.width, dy / this.height)));
      const translate = [(this.width / 2) - (scale * x), (this.height / 2) - (scale * y)];
  
      this.view.transition()
          .duration(750)
          .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
  
      return null;
    }
  </code></pre>
  
  <p>I have been trying different solutions for two days now but could not get it working. </p>
  
  <p>Any help more than appreciated!</p>