使用D3.js时Javascript闭包不能正确访问外部变量？

Question

在用d3.js v5版本，如下javascript代码片段

let colorData = [1, 2, 3, 4, 5, 6, 7, 8];
let colorSchemes = [
    d3.scaleOrdinal(d3.schemeCategory10),
    d3.scaleOrdinal(d3.schemeAccent),
    d3.scaleOrdinal(d3.schemePaired),
    d3.scaleOrdinal(d3.schemePastel1),
    d3.scaleOrdinal(d3.schemeDark2),
    d3.scaleOrdinal(d3.schemeSet1)
];

let scheme = colorSchemes[0];
let test_color = scheme(1); // test_color = #1f77b4

// here ignore some code about "svgs"
svgs.selectAll("circle")
    .data(colorData).enter()
    .append("circle")
    .attr("fill", (d, i) => {
        let scheme = colorSchemes[i];
        return scheme(d); // the console log "scheme is not a function"
    });

为什么test_color能正确取得值，而闭包内同样的代码不能正确执行？

Answer 1

自问自答。
原来我把上面代码中的变量i的含义弄错了，i是colorData的索引号，不是colorSchemes的索引号。
下面的更正后的代码：

let colorData = [1, 2, 3, 4, 5, 6, 7, 8];
let colorSchemes = [
    d3.scaleOrdinal(d3.schemeCategory10),
    d3.scaleOrdinal(d3.schemeAccent),
    d3.scaleOrdinal(d3.schemePaired),
    d3.scaleOrdinal(d3.schemePastel1),
    d3.scaleOrdinal(d3.schemeDark2),
    d3.scaleOrdinal(d3.schemeSet1)
];

// here ignore some code about "svgs"
svgs.each(function (d, schemeIndex) {
    d3.select(this)
        .selectAll("circle")
        .data(colorData)
        .enter().append("circle")
        .attr("fill", (d, i) => {
            let scheme = colorSchemes[schemeIndex];
            return scheme(d);
        })；
});