title: d3 click to center content at position of element or click
body: <p>I have been trying to get the basics of how I make a pannable zoomable, and click to center zoom on element d3 work. This example is what I want to do but I am having trouble translating it outside of the geo context: <a href="https://bl.ocks.org/mbostock/2206340" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/2206340</a></p>
  
  <p>What I have accomplished is the first two parts pan and zoom, see a basic fiddle here <a href="https://jsfiddle.net/e9fbn2xp/" rel="nofollow noreferrer">https://jsfiddle.net/e9fbn2xp/</a></p>
  
  <p>How can I accomplish centering the the circle in the center of the viewable window, so it looks like the circle is zoomed to? Note that although this is a fixed position circle I will eventually have dynamic data, so ideally I could reference the circles position dynamically. </p>
  
  <p>Here is my code:</p>
  
  <p>HTML (note that this is React JSX syntax but that should be irrelevant to question)</p>
  
  <pre><code>     &lt;div style={{width: 800}}&gt;
              &lt;svg style={{border: '1px solid black'}} id="viz" width="800" height="800"&gt;
  
              &lt;/svg&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>    var svg = d3.select("#viz")
      var width = svg.attr("width");
      var height = svg.attr("height");
  
      var testLayer = svg.append('g');     
      var aRect = testLayer.append("rect")     
      .attr("x", 0)         
      .attr("y", 0)          
      .attr("height", 800)    
      .attr("width", 800)  
      .attr("fill", 'green');
  
      var aCircle = testLayer.append("circle")
      .style("stroke", "gray")
      .style("fill", "white")
      .attr("r", 40)
      .attr("cx", 200)
      .attr("cy", 200)
      .on("mousedown", zoomToMe);
  
      function zoomToMe(){
          console.log("do the zoom")
      }
  
      var zoom = d3.zoom()
      .scaleExtent([.5, 40])
      .translateExtent([[0, 0], [width, height]])
      .on("zoom", zoomed);
  
      svg.call(zoom);
  
      function zoomed() {
      testLayer.attr("transform", d3.event.transform);
      }
  
      svg.on("click", function() {
          var coords = d3.mouse(this);
      })
  </code></pre>