javascript - 迁移到函数 : "Uncaught ReferenceError: svg is not defined"? 时代码不起作用

Question

我以前的代码工作正常，按线性顺序:

// SVG injection:
var width  = 600;
var svg = d3.select("#hook").append("svg")
        .attr("width", width);

// Projection default
var projection = d3.geo.mercator()
        .scale(1)
        .translate([0, 0]);
var path = d3.geo.path()
        .projection(projection); //  .pointRadius(4)

injectPattern(); 

...但我想将其迁移到具有多个参数的函数中。当我移动到这样的函数时:

var locationMap = function(hookId, width, target, title, WEST, NORTH, EAST, SOUTH){
    // all previous code and more here
}
locationMap(all_the_suitable_parameters_here)

它失败了，现在返回 injectPattern() 错误消息:

Uncaught ReferenceError: svg is not defined

请注意，injectPattern() 确实会向 svg 附加一些内容，但它以前是在创建 svg 之后才执行的。

var injectPattern = function(){
    var pattern = svg.append("defs")
        .append("pattern")
            .attr({ id:"hash2_4", width:"6", height:"6", patternUnits:"userSpaceOnUse", patternTransform:"rotate(-45)"})
        .append("rect")
            .attr({ width:"2", height:"6", transform:"translate(0,0)", fill:"#E0E0E0" }); // (!) fill: wp.location.land
}

如何将我的代码迁移到函数并保持其与以前相同且正确的顺序工作？

Working but not into function VS into function but sending error back

Answer 1

这不会起作用:

function locationMap() { 
    var svg = .... //Svg is only visible in locationMap function
}

function injectPattern() {
    use svg here;
}

<小时/>

这可以工作，但不太好:

function locationMap() { 
    var svg = .... 
    function injectPattern() {
        use svg here; //will work
    }
}

只要调用一次函数，就不必使用它...

编辑:

如果你必须有一个函数，你可以将你的 svg 作为参数传递:

function locationMap() { 
    svg = ....
    injectPattern(svg);
}

function injectPattern(svg) {
        use svg here; //will work
}

简洁的功能。