使用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);        })；});