44

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 ?

3 Answers 3

31

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.

3
  • 1
    Could you please provide example code of how to set transform using the style attribute? 10x
    – vsync
    Nov 15, 2015 at 14:55
  • the link does not take anywhere useful, it redirects to the home page of O'Reilly Media
    – Fernando
    Sep 11, 2018 at 20:11
  • Subsequent translations seem to apply to the original position, rather than the current position. This was seriously confusing me for a day or so. But given an element at (x,y) translate(0,h), followed by a second translate(0,-h) later, does not result in the element being in it's original position — but rather (x,y-h).
    – Isaac
    May 2, 2019 at 10:04
19

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.

9

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:

https://d3og.com/dustinlarimer/6050773/

4
  • 1
    Seems to be cut off when I'm looking at it, but thanks for sharing Aug 21, 2014 at 18:25
  • This example only works in IE; broken in FF and Chrome.
    – Upperstage
    Sep 8, 2014 at 12:40
  • Can you two share a bit more on that? It seems to be working fine for me.
    – Dustin
    Oct 3, 2014 at 1:00
  • @larimer Thanks for the educational example. Without tweaking it only displays the top half of a black circle in Chrome, though. This can be fixed by adding these attributes to the <svg/>: width="960" height="500" (or using this CSS: #stage > svg {width: 960px; height: 500px;}). Dec 17, 2014 at 11:58

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.