This video is available to students only

Creating our bounding box

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

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

Start a new discussion. All notification go to the author.