Question

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

有人可以解释为什么我们应该把＆＃34; +＆＃34;在i * barHeight之前和之后？

Answer 1

这将设置＆＃34; g＆＃34;的每个元素的transform属性。根据元素索引收集。

例如：如果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

有助于格式化代码。

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

答案与d3无关。这就是你如何在javascript中使用变量创建字符串。相当于这样的事情：

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

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

2 个答案: