Limit map panning with zoom.translateExtent in D3 v4

Question

I am trying to display a map of one state with zooming and panning limited by state boundaries. It basically works, with the exception of the panning constraint, when the state path is scaled to fit a smaller container. I think it comes down to the fact that I don’t understand what arguments to use for zoom.translateExtent(although I am very new to this, so this might be something else).

Live example on bl.ocks.org with links to the prior art .

It is noteworthy that I use the zero projection for d3.geoPath, because I used ogr2ogrto create a shapefile in the projected coordinates for each state. This is why I used the scale transform to fit the map in its container.

Answer 1

Today I have the same problem, and I did some tests.

I noticed that this same weird behavior happens when you have a translateExtent box smaller than the content items .

( ) : , translateExtent , , , , - "" , ( ).

, D3

var MIN = {x: 0, y: -500},     //top-left corner
    MAX = {x: 2000, y: 500};   //bottom-right corner

function zoomed() {
   var transform = d3.event.transform;

   // limiting tranformation by MIN and MAX bounds
   transform.x = d3.max([transform.x, MIN.x]);
   transform.y = d3.max([transform.y, MIN.y]);
   transform.x = d3.min([transform.x, MAX.x]);
   transform.y = d3.min([transform.y, MAX.y]);

   container.attr("transform", transform);
}

d3, , translateExtent.

Answer 2

@McGiogen , , MIN transform.k.

, , , SVG ( , ):

( x+kw >= w x >= (1-k)w, y)

, svg [w, h]:

function zoomed() {
    var t = d3.event.transform;

    t.x = d3.min([t.x, 0]);
    t.y = d3.min([t.y, 0]);
    t.x = d3.max([t.x, (1-t.k) * w]);
    t.y = d3.max([t.y, (1-t.k) * h]);

    svg.attr("transform", t);
}