Add explanation when .translate is at the end of Transform

[Niekes]

In the examples on https://observablehq.com/collection/@d3/d3-zoom I see that you are adding .translate twice and to the end:

d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-x, -y)

In the docs it says that the order matters. It would be nice to add an explanation to the docs.

Thanks for your amazing work!

[Fil]

I read "order of transformations matters" in the context of applying a transform as a css style or attribute: transform="translate(x,y) scale(k)".

In the notebook you're mentioning the explanation for the double call to translate is that, when we call transform.translate(x,y), the actual elements t.x, t.y of the transform t will be incremented by t.k×x, t.k×y, like so:

d3.zoomIdentity
  // translate
  .translate(300, 200) // { k:1, x: 300, y: 200 }
  // scale (and keep the translated point unchanged)
  .scale(40) // { k: 40, x: 300, y: 200 }
  // translate (taking into account the scale)
  .translate(-1, 1) // {k: 40, x: 260, y: 240}

The relationship between these numbers is described in the matrix https://github.com/d3/d3-zoom#zoom-transforms ; I'm not sure what to add to make this more explicit? Maybe in https://github.com/d3/d3-zoom#transform_translate?

[Fil]

So maybe https://github.com/d3/d3-zoom#transform_translate should read:

a transform whose translation t_x1 and t_y1 is equal to t_x0 + t_k x and t_y0 + t_k y, where t_x0 and t_y0 is this transform’s translation.

instead of

a transform whose translation t_x1 and t_y1 is equal to t_x0 + x and t_y0 + y, where t_x0 and t_y0 is this transform’s translation.

?