New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 13. This example goes back to elementary principles to looks at how the SVG group element is implemented with D3. Nothing sophisticated, just some circles and squares, with an example borrowed from DashingD3.js.
xxxxxxxxxx
<meta charset="utf-8">
<head>
<title>D3 Block-a-Day: Day 13, January 13, 2017</title>
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
circleData = [
{ "cx": 20, "cy": 20, "radius": 10, "color" : "green" },
{ "cx": 45, "cy": 45, "radius": 10, "color" : "blue" },
{ "cx": 70, "cy": 70, "radius": 10, "color" : "purple" }];
rectangleData = [
{ "rx": 110, "ry": 80, "height": 10, "width": 10, "color" : "blue" },
{ "rx": 135, "ry": 105, "height": 10, "width": 10, "color" : "black" },
{ "rx": 160, "ry": 130, "height": 10, "width": 10, "color" : "red" }];
svgContainer = d3.select("body").append("svg")
.attr("width",960)
.attr("height",200);
// Add the SVG Group Element ('g') Transform Here
circleGroup = svgContainer.append("g")
.attr("transform", "translate(250,0)");
// Circles added to the circleGroup
circles = circleGroup.selectAll("circle")
.data(circleData)
.enter()
.append("circle");
// Attributes added to the circles
circleAttributes = circles
.attr("cx", function (d) { return d.cx; })
.attr("cy", function (d) { return d.cy; })
.attr("r", function (d) { return d.radius; })
.style("fill", function (d) { return d.color; });
// Add the SVG Group Element Transform Here
// NOTE: Rotation occurs around (0,0)/Upper Left
rectangleGroup = svgContainer.append("g")
.attr("transform", "rotate(20)");
// Rectangles added to the svgContainer
rectangles = rectangleGroup.selectAll("rect")
.data(rectangleData)
.enter()
.append("rect");
// Attributes added to the rectangles
rectangleAttributes = rectangles
.attr("x", function (d) { return d.rx; })
.attr("y", function (d) { return d.ry; })
.attr("height", function (d) { return d.height; })
.attr("width", function (d) { return d.width; })
.style("fill", function(d) { return d.color; });
</script>
</body>
https://d3js.org/d3.v4.min.js