d3.js The 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 element will be positioned relative to its enclosing element.

One thing might need mentioning is that, we can’t nest inside another , it won’t work.

Case: Multiple Charts

For example, this multiple donuts chart is made up by multiple elements, which contains a donut chart respectively. This can be achieved by using the element, but in this case where we only want to put donut chart one by one next to each other, is more convenient.

One thing to bear in mind is that we can’t use transform attribute on nevertheless we can use x, y for position.