for循環僅適用於第一次迭代

Question

執行我有以下for循環被追加rect到group元素：

var svg_container = d3.select(element[0]).append('svg') 
             .attr('width', width) 
             .attr('height', 50) 

var legend_group = svg_container.append('g'); 

for(var i = 0; i < 5; i++) { 
    legend_group.append('rect') 
           .attr('x', i += 10) 
           .attr('y', 5) 
           .attr('width', 10) 
           .attr('height', 5) 
           .attr('fill', 'red') 
} 

但它只是爲i = 0運行，沒有錯誤。然而，當我刪除attr鏈，其工作原理如下：

for(var i = 0; i < 5; i++) { 
    legend_group.append('rect'); 
} 

爲什麼for循環不是每次迭代執行？

Answer 1

這是因爲在這一行你chainging i本身超過5。

.attr('x', i += 10) 

您應該擁有它，只讀只有.attr('x', i + 10)。

Answer 2

因爲你在這一行.attr加入+10我（「X」，我+ = 10）。我想你需要像1 + 10

Answer 3

for循環的第二個字段是在每次循環運行之前檢查的條件。在你的循環中，你將爲我加10並同時分配它。在第一次運行後，循環邏輯發現我是10，並且因爲條件（我不再滿足）而退出。只需將i += 10更改爲i + 10或i * 10即可。

Answer 4

那是因爲你在第一個循環加10到您的增量計數器：

.attr('x', i += 10) 

之後，在第一次迭代，i是10，這是大於你的極限。

您很可能錯誤地使用了相同的變量，但這裏沒有足夠的信息。但如果你這樣做，改變你的循環內的i，或在for循環條件