title: D3 Pan Zoom Overflow
body: <p>I was wondering if you could help me with the follwoing D3js Zoom and pan functionality in the following fiddle: <a href="http://jsfiddle.net/moosejaw/nUF6X/5/" rel="nofollow noreferrer">http://jsfiddle.net/moosejaw/nUF6X/5/</a></p>
  
  <p>I hope the code (although not great) is straight forward.  </p>
  
  <p>I have a chart that has total chromosome length by total chromosome length.  The tick values are the individual lengths (totals) of each chromosome.  The ticks are formatted to be the name of the chromosomes (to look nice to the end user).</p>
  
  <p>The problems that I am having are:</p>
  
  <ol>
  <li><p>The x-axis and y-axis labels are extending outside the graph area.  When I do not supply the tick values explicitly, the labels "disappear" as they should. See:</p>
  
  <pre><code>var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickValues(tickValues)
  .tickFormat(function(d) { 
      var ret = bpToChrMBP(d);
      return ret.chr;
  });
  </code></pre></li>
  <li><p>How do I prevent the x axis to not pan to the left before the minimum value?  Also not pan to the right past the maximum value?  This happens whether or not I am zoomed in.  (The same for y-axis, except top and bottom).</p></li>
  <li><p>Is there a way to "center" the axis labels between the tick marks.  The tick marks are not evenly spaced. I tried using subdivide for minor tick marks, but that doesn't subdivide between tick marks correctly.</p></li>
  </ol>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p>Matt</p>