CODEWITHSUNDEEP
svgd3.jstransformprojectiontopojson
Sebastian B.
Sebastian B.

Reputation: 297

Understanding D3 TopoJSON transformations

I am trying to understand D3 SVG transformation for a World-Map that allows zooming to a clicked country.

My current implementation is able to draw a World-Map and scale it to any resolution full-screen. Moreover, it can compute the same for a specific country or a collection of countries.

For example, my implementation computes the following projection for drawing the entire world map on a 2560x1440 screen:

d3.geo.mercator()
  .center(22.266249946553817,41.93985624315233)
  .scale(265.88042450605)
  .translate(1336.2192475286854,576.7978959424244)

And if, for example, Germany should be drawn to fit the screen, the implementation computes the following projection:

d3.geo.mercator()
  .center(10.36090255016238,51.05100408657832)
  .scale(5575.925124835363)
  .translate(1279.7901899016058,608.1878627921983)

Now I want to transform between the two views in an animated manner, but I somehow fail to understand the svg "transform" attribute that I need to attach to the path group.

How can I transform between the two projections? I thought I can just do:

translate(1336.2192475286854,576.7978959424244)   //projection.translate() worldmap view
scale(5575.925124835363)                          //scale computed for Germany
translate(1279.7901899016058,608.1878627921983)   //offset computed for Germany

But when inspecting the "g" DOM-element and its transform attribute, it contains completely different values.

What am I missing here?

Glad for any feedback!

Best, Sebastian

Upvotes: 0

Views: 896

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You need to transition between the two transforms. Using the default transition gives unsatisfactory results though, so you need a custom interpolation. See this example for some more explanations. Here is an example that does exactly what you want with a map.

Upvotes: 1

Related Questions