title: How "d3.translateExtent" coordinate works?
body: <p><strong><a href="https://jsfiddle.net/sarathsaleem/76t03kbu/" rel="noreferrer">jsfiddle DEMO</a></strong> </p>
  
  <p>I am trying to add a drag to the circle and trying to apply a translateExtent. So how to restrict the drag boundary to the rectangle .?</p>
  
  <pre><code>var height = 500;
  var width = 500;
  
  
  //if extent is specified, sets the translate extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner of the world and [x1, y1] is the bottom-right corner of the world, and returns this zoom behavior. 
  var zoom = d3.zoom()
     .translateExtent([[100, 100], [400, 400]])
      .on("zoom", zoomed);
  
      // Feel free to change or delete any of the code you see in this editor!
      var svg = d3.select("body")
          .append("svg")
          .attr("width", height)
          .attr("height", width)
          .append("g")
  
  svg.append("rect")
          .attr("x", 100)
          .attr("y", 100)
          .attr("height", 300)
          .attr("width", 300);
  
      var circle = svg.append("circle")
          .attr("cx", 100)
          .attr("cy", 100)
          .attr("r", 20)
          .style("fill", "red")
  
      svg.call(zoom);
  
      function zoomed() {
        circle.attr("transform", d3.event.transform);
      }
  </code></pre>
  
  <p>Any detailed explanation of how the  <a href="https://github.com/d3/d3-zoom#zoom_translateExtent" rel="noreferrer">https://github.com/d3/d3-zoom#zoom_translateExtent</a> works ? How is the boundary calculated from the coordinates.</p>