Question

我将D3可视化库用于许多项目，并发现自己复制并粘贴了每个项目的大量样板代码。例如，大多数项目都是这样开始的：

var margin = {top: 20, right: 10, bottom: 30, left: 60},
    width = 960,
    height = 500;

var svg = d3.select(container_id).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

在这种代码之后，每个项目都会发生分歧。 D3的一部分乐趣在于你为每个新项目做了一些专门的，有创意的编码。

我想为样板代码编写一个轻量级的包装器，这样我每次都可以跳到有趣的部分，这样我就意识到我不太明白如何正确地创建一个复杂的，可重用的Javascript对象。这就是我的开始：

var d3mill = function() {
    var margin = {top: 20, right: 10, bottom: 30, left: 60},
        width = 960,
        height = 500;

    var svg = d3.select(container_id).append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom);

    return {
        svg: function() { return svg; },
        call: function(f) { f(); }
    };
};

我想我希望能够做到这一点：

 var d3m = d3mill();
 var test = function() {
     console.log(svg);
 };
 d3.call(test);

我想（希望）通过call()传递函数会导致函数在d3mill实例的闭包内触发，从而定义svg。

以上述svg()函数的方式将闭包中的每个变量暴露给外部世界将是一个巨大的浪费时间。允许外部功能在这里运行的正确方法是什么？

Answer 1

如果您将代码更改为：

return {
    svg: function() { return svg; },
    call: function(f) { f.call(this); }
};

然后应该正确地将test中的上下文设置为d3m。

在该函数中，您应该能够访问this.svg()以获取SVG对象，但是不能够访问“私有”词法范围变量{{1}直接，即：

svg

您也可以在调用时将var d3m = d3mill(); var test = function() { console.log(this.svg()); // OK console.log(svg); // not OK - undefined variable }; d3m.call(test);参数传递给svg：

用法：

return {
    svg: function() { return svg; },
    call: function(f) { return f.call(this, svg); }  // also added "return", just in case
};

Answer 2

您也可以使用构造函数。

var D3Mill = (function() {
    var defaults = {
        margin: { top: 20, right: 10, bottom: 30, left: 60 },
        width: 960,
        height: 500
    };

    function num(i, def) {
        return ("number" === typeof i) ? i : def;
    }

    function D3Mill(container_id, opts) {
        opts = opts || {};
        // Use opts.xxx or default.xxx if no opts provided
        // Expose all values as this.xxx
        var margin = this.margin = (opts.margin || defaults.margin);
        var width  = this.width  = num(opts.width,  defaults.width);
        var height = this.height = num(opts.height, defaults.height);
        this.svg = d3.select(container_id).append("svg")
           .attr("width", width + margin.left + margin.right)
           .attr("height", height + margin.top + margin.bottom);
    }

    D3Mill.prototype.perform = function(f) { return f.call(this); };

    return D3Mill;
}());

var d3m = new D3Mill("my_container_id");
// or
var opts = {
    width: 1,
    height: 1,
    margin: { ... }
};
var d3m = new D3Mill("my_container_id", opts);

var test = function() {
    console.log(this.svg, this.margin, this.width, this.height);
};
d3m.perform(test);

Answer 3

以下内容还允许您访问测试中所需的变量。

var d3mill = function() {
    this.margin = {top: 20, right: 10, bottom: 30, left: 60},
        width = 960,
        height = 500;

    this.svg = d3.select(container_id).append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom);

};


var d3m = new d3mill();
var test = function() {
  console.log(this.svg);
};
test.call(d3m);

在范围之外编写Javascript函数以在范围内触发

3 个答案: