D3. Why is my group translation not working? - d3.js

Question

My goal here is to translate a group of svg elements with a translation. It is not working. Here is the code:
Create an SVG container
// create svg container
canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height);
Append a translation of x=200, y=200
// apply a transform
canvas.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
Add a box
// render a background
canvas.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
Add a y-axis
// render y-axis
canvas.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);
The box + y-axis line never translates. For a sanity check I applied the translation direction to the box and it did translate. Sigh.
I am assuming the group translation implies a local coordinate system within with x = y = 0 would be the origin of the translated coordinate frame. No? What am I missing here?

Answer 1

The problem is, that the .append() function does not change the selection that it is called on, but returns a new selection.
Therefore the g element gets appended to the svg and the rect gets also appended to the svg and not inside the translated g element. You should see this if you inspect the svg output.
There are two possible solutions:
1: If you want to translate everything, append the g element in the first statement like so:
var canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
canvas.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
canvas.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);
2: If you want to append something outside of the translated group,
assign the groupselection to a new variable like so:
var canvas = d3.select("body").append("svg")
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height);
var canvasGroup = canvas.append("g")
.attr("transform", function(d) { return scarpa.translate(200, 200); });
canvasGroup.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", canvasBBox.width)
.attr("height", canvasBBox.height)
.style("opacity", 1)
.style("fill", function(d) { return scarpa.rgb_SVG(0,255,0); });
canvasGroup.append("g")
.attr("class", "y axis")
.append("line")
.attr("stroke", function(d) { return scarpa.grey_SVG(64); })
.attr("x1", histogram.xScale(0))
.attr("y1", 0)
.attr("x2", histogram.xScale(0))
.attr("y2", canvasBBox.height);