使用 setTimeout() 时的 JavaScript 未捕获引用

Question

我正在使用 d3.js 进行数据可视化，但我不是 JavaScript 程序员，所以我写了如下内容

        for(var i =0;i<6;i++){
          setTimeout(function(){
            var in = data[0][i];
            slate(" + margin.left + "," + margin.top + ")");
            var svg = d3.select("#clustering").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            svg.append("rect")
                    .attr("width", width)
                    .attr("height", height);

            svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

            svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis);

            var color = d3.scale.category10();
            refreshGraph();
                },1000);
            }
        /*
        * function displaying data on svg
        * called every time data change
        */
        var refreshGraph = function(){

            // removing all previously drawn dots
            svg.selectAll(".dot")
            .data(instruments)
            .exit()
            .remove();
          }

但是我收到了这个错误 Uncaught ReferenceError :svg未定义我知道函数refreshGraph看不到var svg，但是我不知道如何解决这个问题。感谢您的帮助。

Answer 1

或者:

• 在传递给 setTimeout 的函数内定义分配给 refreshGraph 的函数，以便 svg 仍在范围内或
• 完全在循环外部声明svg，使其保留在或范围内
• 在调用该函数时将 svg 作为参数传递给该函数