D3 Translate Value

Question

I'm working on a D3 project right now, and the following code WORKS but I don't understand why.

When translating (moving) the position of a Y-Scale of an area chart (in this example it is the yAxis variable that I call in the last line of code) I should enter in the value of the transform attribute surrounded by two "+" icons. Why is this value broken up with quotation marks and what is the purpose of the + icons? If someone could break down the last line of code that would be very helpful.

var margin = {left: 50, right: 50, top: 40, bottom: 0};

var yScale = d3.scaleLinear()
.domain([0, 229])
.range([height, 0]);

var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("class", "axis y").call(yAxis)
.attr("transform","translate("+margin.left+",200)").call(yAxis);

Answer 1

The + is string concatenation*. In your case, "translate("+margin.left+",200)" is changed to "translate(50,200)" because margin.left === 50.

*or, more appropriately the add function for strings.