Can someone explain the following Javascript code in d3.js?

Question

var bar = chart.selectAll("g")
               .data(data)
               .enter().append("g")
               .attr("transform", function(d, i) 
               { 
                 return "translate(0," + i * barHeight + ")"; 
               });

Can someone explain that why we should put the "+" before and after i * barHeight ?

Answer 1

this will set the transform attribute of each element of the "g" collection according to the index of element.

eg: if barHeight = 10

<g tranform="tranlate(0, 0)"/>
<g tranform="tranlate(0, 10)"/>
<g tranform="tranlate(0, 20)"/>
<g tranform="tranlate(0, 30)"/>
<g tranform="tranlate(0, 40)"/>

Answer 2

It helps to format the code.

var bar = chart.selectAll("g") 
.data(data) 
.enter().append("g") 
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

The answer has nothing to do with d3. It's just how you make strings with variables in javascript. Equivalent to something like this:

var name = "Johnny"
console.log("Hello " + name + " how are you today?")
//Hello Johnny how are you today?