Core Conceptions of SVG Used in D3.js- 7 mins
SVG is one of the fundamental parts of d3.js. It is very important to understand the basics of SVG since SVG shapes constitute these d3 charts.
There are a dozen of SVG tutorials out there, but in this post, I will focus on some core conceptions which are commonly used in d3.js.
In a normal mathematical coordinate system, the point x=0, y=0 is at the lower left corner of the graph. But in the SVG coordinate system, this (0,0) point is at the top left corner of the ‘canvas’, it is sort of similar to CSS when you specify the position to absolute/fix and use top and left to control the exact point of the element.
It is essential to keep in mind that as y increases in SVG, the shapes move down.
Case: Y Axe Range
Let’s say we’re going to create a scatterplot with each point correspondent to a x value and y value. To scale the value, we need to set the domain and the range like this:
However, if you just keep the settings like this, the points will be based on the top horizontal edge instead of the bottom horizontal line as what we expected.
The nice thing about d3 is that you can easily change this by a simple adjustment in domain setting:
With above code, the zero point of domain is correspondent to the height of the SVG, which is the bottom line of the chart in the viewer’s eyes, meanwhile, the max value of the source data will be correspondent to the zero point of the SVG coordinate system, which the max value for viewers.
The rect Element
<rect> represents rectangle, apart from aesthetic properties like stroke and fill, rectangle shall be defined by location and size.
As for the location, it is determined by the
y attributes. The location is relative to the rectangle’s parent. And if you don’t specify the x or y attribute, the default will be 0 relative to the parent element.
After you specify the location, or rather the ‘starting point’ of the rect, the next thing is to specify the size, which is essential if you want to actually draw sth on the canvas, that is to say, if you don’t specify the size attributes or the value is set as 0, you won’t see anything on the canvas.
Case: Bar Chart
Continue with the first scenario, the y axes, but this time, let’s try to draw a bar chart.
Assuming the y scale setting is the same, the y axis is properly set as well, the only difference between the scatterplot and this bar chart is that, we need to specify the width and the height, particularly the height. To be more specific, we’ve already got the ‘starting point’, the rest is to use things like for the height:
The svg Element
<svg> element is the root element, or the canvas as we are drawing charts on it.
SVG elements can be nested inside each other, and in this way, SVG shapes can be grouped together, meanwhile, all shapes nested inside an
<svg> element will be positioned relative to its enclosing
One thing might need mentioning is that, we can’t nest
<rect> inside another
<rect>, it won’t work.
Case: Multiple Charts
For example, this multiple donuts chart is made up by multiple
<svg> elements, which contains a donut chart respectively. This can be achieved by using the
<g> element, but in this case where we only want to put donut chart one by one next to each other,
<svg> is more convenient.
One thing to bear in mind is that we can’t use
transform attribute on
<svg> nevertheless we can use
y for position.
The g Element
<g> element is used to group SVG shapes together, and it is very useful when you want to transform the group of shapes as if it was a single shape whereas you can’t use
<svg> element. Besides, the styling of g elements are inherited by its children.
<g> element is commonly used in d3 chart, for example, the ticks of the axes, the margin convention, etc.
Case 1: Margin Conventions
It is convenient to use margin conventions for d3 chart, because we don’t need much effort to keep these margins in line later.
Case 2: Pie Chart
The other scenario is that multiple donuts chart, if we look closely at each
<svg> element, we can see that there is a
<g> element with
transform attribute. Specifically since the arc generator will draw the pie chart based on the (0,0) point, if we don’t transform the
<g> element, 3/4 of the pie chart will be blocked.
The text Element
The position of the text is determined by the
y attributes (the
y value determines the horizontal location of the bottom of the text). Some other attributes are commonly used in d3 charts include:
This attribute determines which part of the text is positioned at the
We can also use
transform attribute on
<text> element, which means we can rotate the text, particularly, a single value results in each word rotating at that value while a string of values can be used to assign different rotation value to each letter.
SVG doesn’t currently support automatic line breaks or word wrapping, that’s when
<tspan> comes to rescue.
<tspan> element positions new lines of text in relation to the previous line of text. And by using
dy within each of these spans, we can position the word in relation to the word before it.
Case: Annotation on Axes
For example, when we want to add an annotation on y Axe:
The path Element
<path> element is used to draw irregular shapes. To draw any shape by
<path>, the path data is needed as
<path d="[path data]">.
Case: Arc and Stacked Chart
For example, when we use arc generator with pie layout, this is one of the results: