This video is available to students only
Step 3: Draw canvas
The third step: drawing our canvas. We create our wrapper & bounds, then shift them to respect our margins.
Draw canvas#
Let's make some SVG elements! This step will look exactly like our line chart code. First, we find an existing DOM element (#wrapper
), and append an <svg>
element.
Then we use attr
to set the size of the <svg>
to our dimensions.width
and dimensions.height
. Note that these sizes are the size of the "outside" of our plot. Everything we draw next will be within this <svg>
.
1
const wrapper = d3.select("#wrapper")
2
.append("svg")
3
.attr("width", dimensions.width)
4
.attr("height", dimensions.height)
This page is a preview of Fullstack D3 Masterclass