D3 transform scale and translate

by

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.

Leave a Comment