Learning D3.js 5 Mapping - Second Edition

Scale

The scale transform is easy to understand but often creates undesired effects if you lose the focus of where the scaling originated.

Scale adjusts the (x, y) values across all attributes in the element. Using the earlier circle code, we have the following:

<circle cx="62" cy="62" r="50" stroke-width="5" fill="red"   transform="scale(2,2)"></circle>

The scale is going to double the cx, cy, radius, and stroke-width, producing the following output (http://localhost:8080/chapter-2/scale.html):

It is important to emphasize that, because we are using SVG commands to draw the shapes, there is no loss of quality as we scale the images, unlike ...