This video is available to students only

Creating our bounding box

We create our bounding box, and shift it to respect our margins.

Creating our bounding box#

Our SVG element is the size we wanted, but we want our chart to respect the margins we specified.

Let's create a group that shifts its contents to respect the top and left margins so we can deal with those in one place.

Any elements inside of an <svg> have to be SVG elements (with the exception of <foreignObject> which is fiddly to work with). Since we'll be inserting new chart elements inside of our <svg>, we'll need to use SVG elements for the rest of the chart.

The <g> SVG element is not visible on its own, but is used to group other elements. Think of it as the <div> of SVG — a wrapper for other elements. We can draw our chart inside of a <g> element and shift it all at once using the CSS transform property.

 

This page is a preview of Fullstack D3 Masterclass

Please select a discussion on the left.