javascript - D3 Pan Zoom Overflow - Stack Overflow

admin管理员组

文章数量:1277898

I was wondering if you could help me with the follwoing D3js Zoom and pan functionality in the following fiddle: /

I hope the code (although not great) is straight forward.

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).

The problems that I am having are:

1. 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:

   var yAxis = d3.svg.axis()
   .scale(y)
   .orient("left")
   .tickValues(tickValues)
   .tickFormat(function(d) { 
       var ret = bpToChrMBP(d);
       return ret.chr;
   });
   

2. 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).

3. 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.

Any help would be greatly appreciated!

Matt

I was wondering if you could help me with the follwoing D3js Zoom and pan functionality in the following fiddle: http://jsfiddle/moosejaw/nUF6X/5/

I hope the code (although not great) is straight forward.

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).

The problems that I am having are:

1. 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:

   var yAxis = d3.svg.axis()
   .scale(y)
   .orient("left")
   .tickValues(tickValues)
   .tickFormat(function(d) { 
       var ret = bpToChrMBP(d);
       return ret.chr;
   });
   

2. 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).

3. 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.

Any help would be greatly appreciated!

Matt

• javascript
• svg
• d3.js
• zooming
• pan

Share Improve this question Follow edited Apr 18, 2014 at 7:46 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked May 22, 2013 at 1:49 mattjvincentmattjvincent 88833 gold badges1313 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

This Fiddle solves most of your problems: http://jsfiddle/CtTkP/ The explanations are below:

• I am not sure what you meant by extending beyond the graphs area. Should the labels be insde the chart-area? If you mean that on panning, the labels extend beyond the axis, the problem can be solved by using two more clip-paths judiciously, though this does not allow for graceful fading of values which 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 the panning from extending beyond values, you will have to manually restrict the translate for the 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 will not allow the graph from panning beyond the limits.

• As you are explicitly overriding the tickValues, you can tweak the values to 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 for xAxis and yAxis, use tickValues2.

1. The problem is that you are setting tickValues manually, instead of letting the x and y scale do it for you. Try menting it out: // .tickValues(tickValues)

   var x = d3.scale.linear().rangeRound([0, width]).domain(d3.extent(tickValues));

   var xAxis = d3.svg.axis() .scale(x) .orient("bottom") // .tickValues(tickValues) .tickFormat(function(d) { var ret = bpToChrMBP(d); return ret.chr; });

A quick and dirty fix to allow setting tickValues explicitly could be to define a clippingPath for each axis.

You also don't need the make_x_axis function (same for y axis). Check out this zoomable scatterplot example: http://bl.ocks/ameliagreenhall/raw/d30a9ceb68f5b0fc903c/

1. To prevent panning left/right past the cutoffs you would have to re-implement d3.behavior.zoom(). Right now there is a function called mousemove that calls translateTo and this function doesn't have a limit:

   function translateTo(p, l) { l = point(l); translate[0] += p[0] - l[0]; translate[1] += p[1] - l[1]; }

2. You can try playing with the dx and dy attributes when you define the axes.

本文标签： javascriptD3 Pan Zoom OverflowStack Overflow