Let's get access to the D3.js library so that we can begin. In this case, we'll be including the library using the HTML
We may often find ourselves needing to group elements together, allowing us to apply transformations or set attributes that are inherited by all child elements of that group. One way to achieve this is to use the container SVG element,
<g>, allowing us to arrange our elements into groups which can also be nested1. We can create these group elements using SVG directly, for example with the following.
<svg> <g fill="#40F99B"> <circle cx="85" cy="75" r="50"></circle> <circle cx="215" cy="75" r="50"></circle> </g> </svg>
Here we can see that we've changed the colour of both circles by setting the
fill attribute on their parent group element,
But we can also do this with D3.js. In this section, we'll use D3.js to create a group containing two circle elements, and change their fill colour to
#40F99B using the group element.
A Container for the Output
This is where you will see the output of the code cells that follow it, provided they are referencing the corresponding
Creating an Empty SVG
We'll create a new detached
<svg> element and use the returned selection throughout the rest of this section.
svg = d3.create("svg");
Creating a Group Element
<g> SVG element is a container used to group other SVG elements. Transformations applied to the
<g> element are performed on its child elements, and its attributes are inherited by its children. We can create a group element with D3.js by appending a
g element using any selection.
var shapeGroup = svg.append("g");
shapeGroup variable refers to our selection of the new
Creating Elements within a Group
Let's create our circles! This time we're appending these
<circle> elements to our new
shapeGroup selection of our new group, rather than directly to the
shapeGroup .append("circle") .attr("cx", 85) .attr("cy", 75) .attr("r", 50); shapeGroup .append("circle") .attr("cx", 215) .attr("cy", 75) .attr("r", 50);
Setting Group Attributes
Previously, we would set the
fill attribute of both
<circle> elements to change their colour. With groups, we can instead set the
fill attribute of our parent group element, the selection of which is stored in our
shapeGroup .attr("fill", "#40F99B");
That's all it takes to change the fill colour of any elements within our group.
Appending to the Container
Finally, let's append everything to our container.
d3 .select("#container") .append(() => svg.node());
We can see the output by checking on our container with the corresponding id, which in this case is where
If we inspect the HTML, we will see the
<circle> elements have been added to the
<div> where the
id=container. We can also see that the
fill colour has been set to
#40F99B, which has been inherited by both circles in the output.
<div id="container"> <svg> <g fill="#40F99B"> <circle cx="85" cy="75" r="50"></circle> <circle cx="215" cy="75" r="50"></circle> </g> </svg> </div>
W3C. Grouping: the ‘g’ element, https://www.w3.org/TR/SVG/struct.html#Groups. ↩