liveBook · Manning

translateExtent()

As explained in D3.js in Action, Third Edition

translateExtent() is a D3 zoom behavior method that gets or sets the allowed spatial extent for translation.

translateExtent() is a D3 zoom behavior method for limiting how far a visualization can be translated during panning. It accepts minimum and maximum coordinates, helping keep a map from moving entirely out of view. section 13.3

Listing 13.12 Implementing zooming and panning (map-world.js)
...
import { zoom } from "d3-zoom";

export const drawWorldMap = (laureates, world) => {

  ...

  const zoomHandler = zoom()   #1
    .on("zoom", (e) => {                    #2
      console.log(e);                      
    });                                    

  select(".map-container")   #3
    .call(zoomHandler);     

};

Use the complete zoom configuration to see translateExtent() alongside scaleExtent(), the zoom event, and SVG transform updates. section 13.3

Constrain a world map

const zoomHandler = zoom() .scaleExtent([1, 5]) .translateExtent([ [-width / 2, -height / 2], [3 * width / 2, 3 * height / 2] ]) .on("zoom", (e) => { svg.attr("transform", e.transform); }); section 13.3

How D3.js in Action, Third Edition covers it

How deep it goes
Defines coordinate bounds and demonstrates their placement in a zoom handler, without detailing D3’s internal constraint calculations.
Examples
Uses a world map with bounds from half-width and half-height offsets around the map area.
What it assumes
Assumes familiarity with D3 selections, SVG transforms, and the zoom behavior’s scaleExtent() method.
What you can do after
Apply it via d3-zoom to keep an interactive map from panning entirely out of view.
How it connects
Connects translation limits with D3 zoom behavior, scaleExtent(), zoom events, and SVG transforms.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.