Javascript closures do not correctly access external variables when using D3.js?

d3.js v5 version is in use, as follows: javascript code snippet

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 = -sharp1f77b4

// 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"
    });

Why does test_color get the value correctly while the same code in the closure does not execute correctly?

D3.js javascript

Mar.02,2021

answer your own questions.
it turns out that I misunderstood the meaning of the variable I in the above code. I is the index number of colorData, not the index number of colorSchemes.
the following corrected code:

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);
        });
});

Previous: Linux scheduled task backup docker database problem

Next: Is there a good solution for float floating div stuck?

Ask for advice on how to change the size of the X-axis coordinate text when using D3 to make a visual chart.
how to change the size of X-axis coordinate text when making visual charts with D3 is there any property that can be set if the font is too large after scaling? ...

D3.js javascript

Mar.01,2021
D3.js tree vertical tree view
d3.js draws a vertical tree want to show the root node, the first layer node is horizontal, the node above the first layer wants to display vertically related codes the examples found online are horizontal. create a Bezier generating curve g...

D3js d3.js javascript

Jun.04,2021
D3.js adds on () listening events to the element with an error. On () is not a function
problem description when using d3.js to do a bar chart demo, you want to add mouse interactive event listening to the bar chart. The direct listening event is added to the growth animation of the element in the form of a chain call to report an error:...

D3.js javascript

Oct.12,2021
How d3.js force map nodes are displayed in the border
the force force map in d3.js is recently used. To achieve the following effect, all city nodes are within visual range, and scrollbars are available if you exceed them. charge-300-3000svg ask for advice on how to limit the node to the svg frame? t...

D3.js javascript

Nov.10,2021

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b34d97-e497.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b34d97-e497.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?