有人能解释一下d3.js中的以下Javascript代码吗？

有人能解释一下为什么我们要在

i*barHeight

前后加“+”？

这有助于格式化代码

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

答案与d3无关。这就是如何在javascript中使用变量生成字符串。相当于这样的东西：

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

---

这将根据元素的索引设置“g”集合中每个元素的transform属性

例如：如果杆高=10

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

这是普通的字符串连接。你还不明白什么？谢谢，我知道，例如，translate（10，10）意味着将坐标从原始位置在X方向上平移10个单位，在Y方向上平移10个单位。我还知道“+”在这里意味着字符串连接。但是你能详细解释一下这一行连接了哪些组件吗？如果在这里以“a+i*barHeight+b”的形式出现，那么a和b分别是什么？@Vivided为什么要重新编辑D3标签？我把它和第7版一起删除了，因为这根本不是关于D3的。标签应该指明问题的真正含义。这是一个关于字符串连接、运算符和操作数的绝对JS基础，可以出现在D3以外的许多上下文中。即使删除包含返回的行周围的任何内容也不会改变问题的含义。@altocumulus根据我的理解，这个问题是关于整个代码段的，而这又是一个纯粹的D3习惯用法。

<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)"/>