svg - 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 ?

question from:https://stackoverflow.com/questions/10893004/d3-transform-scale-and-translate

Answer 1

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.