有人可以告訴我如何用循環替換以下javascript代碼嗎？

Question

dataBase[0].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[0].columnline]); });

dataBase[1].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[1].columnline]); });

dataBase[2].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[2].columnline]); });

dataBase[3].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[3].columnline]); });

dataBase[4].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[4].columnline]); });

dataBase[5].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[5].columnline]); });

dataBase[6].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[6].columnline]); });

dataBase[7].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[7].columnline]); });

我已經嘗試過以下聲明：

for (var i = 0; i < dataBase.length; i++) {

dataBase[i].valueline = d3.svg.line()
    .x(function(d) { return x(d["Date"]); })
    .y(function(d) { return y(d[dataBase[i].columnline]); });

}

但這沒有用，因為我在

function(d) { 
  return y(d[dataBase[i].columnline]); 
} 

i與循環中的i不同。 我還嘗試了stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example的綁定技術

function createfunc(count) {
    return function(d) {
        return y(d[dataBase[count].columnline]);
    };
}
for (var i = 0; i < dataBase.length; i++) {

dataBase[i].valueline = d3.svg.line()
    .x(function(d) { return x(d["Date"]); })
    .y(createfunc(i));
}

但這也導致了錯誤。 有人可以告訴我如何將八行代碼變成一個循環嗎？

Answer 1

正如上面的評論者所述，這幾乎肯定是一個范圍問題，但是很難在不查看周圍代碼的情況下確切地說出哪種范圍問題。 如果您在JavaScript中遇到范圍問題，通常一個好主意是將盡可能多的包裝在獨立函數中，因為它們每個都有自己的范圍，並且在一定程度上可以充當閉包。 也許嘗試類似：

function xFunc(d) {
    return function (d) { return x(d["Date"]) };
}

function yFunc(d, i) {
    return function (d) { return y(d[dataBase[i].columnline]) };
}

for (var i = 0; i < dataBase.length; i++) {

    dataBase[i].valueline = d3.svg.line()
        .x(xFunc(d))
        .y(yFunc(d, i));

}

我不知道這是否會真正起作用，即使這樣做，也可能有更好的方法來構建該閉包。 如果您不熟悉立即調用的函數表達式，請查看這篇文章 ，並考慮找到一種將它們應用於代碼的方法。 它們非常適合防止JavaScript中的范圍問題。