D3 transform scale and translate

Question

I tried to understand how the transform is working in D3 but I think I didn t get it   Does the scale change the size of the SVG object   meaning if I give a big number the size of the object will look bigger   Does the translate move the object from one place to different place   I tried it but it didn t work like I thought   Could you please explain to me how it should work

User · Answer

I realize this question is fairly old  but wanted to share a quick demo of group transforms  paths shapes  and relative positioning  for anyone else who found their way here looking for more info   http   bl ocks org dustinlarimer 6050773

User · Answer

Scott Murray wrote a great explanation of this 1   For instance  for the code snippet   svg append  g        attr  class    axis        attr  transform    translate 0     h             call xAxis     He explains using the following      Note that we use attr   to apply transform as an attribute of g  SVG   transforms are quite powerful  and can accept several different kinds   of transform definitions  including scales and rotations  But we are   keeping it simple here with only a translation transform  which simply   pushes the whole g group over and down by some amount       Translation transforms are specified with the easy syntax of   translate x y   where x and y are  obviously  the number of horizontal   and vertical pixels by which to translate the element     1   From Chapter 8   Cleaning it up  of Interactive Data Visualization for the Web  which used to be freely available and is now behind a paywall

User · Answer

The transforms are SVG transforms  for details  have a look at the standard  here are some examples   Basically  scale and translate apply the respective transformations to the coordinate system  which should work as expected in most cases  You can apply more than one transform however  e g  first scale and then translate  and then the result might not be what you expect   When working with the transforms  keep in mind that they transform the coordinate system  In principle  what you say is true -- if you apply a scale   1 to an object  it will look bigger and a translate will move it to a different position relative to the other objects

[svg] D3 transform scale and translate

Examples related to svg

Examples related to d3.js