javascript - D3 Pan Zoom Overflow -

i wondering if me follwoing d3js zoom , pan functionality in following fiddle: http://jsfiddle.net/moosejaw/nuf6x/5/

i hope code (although not great) straight forward.

i have chart has total chromosome length total chromosome length. tick values individual lengths (totals) of each chromosome. ticks formatted name of chromosomes (to nice end user).

the problems having are:

1. the x-axis , y-axis labels extending outside graph area. when not supply tick values explicitly, labels "disappear" should. see:

   var yaxis = d3.svg.axis() .scale(y) .orient("left") .tickvalues(tickvalues) .tickformat(function(d) {      var ret = bptochrmbp(d);     return ret.chr; }); 

2. how prevent x axis not pan left before minimum value? not pan right past maximum value? happens whether or not zoomed in. (the same y-axis, except top , bottom).

3. is there way "center" axis labels between tick marks. tick marks not evenly spaced. tried using subdivide minor tick marks, doesn't subdivide between tick marks correctly.

any appreciated!

matt

this fiddle solves of problems: http://jsfiddle.net/cttkp/ explanations below:

• i not sure meant extending beyond graphs area. should labels insde chart-area? if mean on panning, labels extend beyond axis, problem can solved using 2 more clip-paths judiciously, though not allow graceful fading of values svg.axis translations provide:

var clipx = svg.append("clippath")       .attr('id', 'clip-x-axis')       .append('rect')       .attr('x', 0)       .attr('y', 0)       .attr('width', width)       .attr('height', margin.bottom);  svg.append("g")     .attr("class", "x axis")     .attr('clip-path', 'url(#clip-x-axis)')     .attr("transform", "translate(0, " + height + ")")     .call(xaxis);  // ...  var clipy = svg.append("clippath")       .attr('id', 'clip-y-axis')       .append('rect')       .attr('x', - margin.left)       .attr('y', 0)       .attr('height', height)       .attr('width', margin.left);  svg.append("g")     .attr("class", "y axis")     .attr('clip-path', 'url(#clip-y-axis)')     .call(yaxis); 

• to prevent panning extending beyond values, have manually restrict translate zoom:

function zoomed() {       var trans = zoom.translate(),          scale = zoom.scale();       tx = math.min(0, math.max(width * (1 - scale), trans[0]));      ty = math.min(0, math.max(height * (1 - scale), trans[1]));       zoom.translate([tx, ty]);      svg.select(".x.axis").call(xaxis);     svg.select(".y.axis").call(yaxis);      // ... 

this not allow graph panning beyond limits.

• as explicitly overriding tickvalues, can tweak values center them:

var tickvalues2 = []; tickvalues.foreach(function (t, idx) {     if (idx < tickvalues.length - 1) {         tickvalues2.push((t + tickvalues[idx + 1]) / 2);     } }); 

then instead of using tickvalues xaxis , yaxis, use tickvalues2.