The following post is a portion of the D3 Tips and Tricks document which it free to download from the main page. To use this post in context, consider it with the others in the blog or just download the pdf :-)
--------------------------------------------------------------------------
As the title states, the next piece of script forms and adds the canvas that D3 will then use to draw on.
var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
So what exactly does that all mean?
Well D3 need to be able to have a space defined for it to draw things. And when you define the space it's going to use, you can also give the space you're going to use a name, attributes and positions within that space a designation.
In the example we're using here, we are 'appending' an SVG element (a canvas that we are going to draw things on) to the '<body>' element of the HTML page.
In human talk that means that on the web page and bounded by the <body> tag that we saw in the HTML part, we will have an area to draw on. That area will be 'width' plus the left and right margins wide and 'height' plus the top and bottom margins wide.
We also add an element 'g' that is referenced to the top left corner of the actual graph area on the canvas. 'g' is actually a grouping element in the sense that it is normally used for grouping together several related elements. So in this case those grouped elements will have a common reference.
(the image above is definitely not to scale, but I hope you get the general idea)
Interesting things to note about the code. The .attr(“stuff in here”) parts are attributes of the appended elements they are part of.
For instance;
.append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom)
tells us that the 'svg' element has a "width" of width + margin.left + margin.right and the "height" of height + margin.top + margin.bottom.
Likewise...
.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
tells us that the element "g"
has been transformed by moving(translating) to the point margin.left,
margin.top. Or to the top left of the graph space proper. This way
when we tell something to be drawn on our canvas, we can use the
reference point "g"
to make sure everything is in the right place.
its easy to get mixed with HTML5 Canvas so better call svg Canvas as SVG element.
ReplyDeleteI think you're right. I started off thinking "cool, it's like a canvas, that must be why I see it in other people's code all the time". Then (further down the track than I care to admit) I realised I was getting the terms horribly wrong. This is definitely on my 'Fix this' list when I get back into editing in a month or so.
ReplyDelete