1

我在很多项目中使用 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()以上述函数的方式将闭包中的每个变量都暴露给外部世界将是极大的浪费时间。允许外部功能在这里运行的正确方法是什么？

4

3 回答 3

1

如果您将代码更改为此：

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

那么它应该正确地将上下文设置test为d3m。

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

var d3m = d3mill();
var test = function() {
    console.log(this.svg());   // OK
    console.log(svg);          // not OK - undefined variable
};
d3m.call(test);

您也可以将svg参数传递给f它被调用的时间：

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

用法：

var d3m = d3mill();
var test = function(svg) {
    console.log(svg);          // now OK - it's a parameter
};
d3m.call(test);
于 2013-06-06T21:33:19.200 回答
0

您也可以用作构造函数。

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);
于 2013-06-06T21:58:27.753 回答
0

以下内容还将使您可以访问您想要在测试中使用的变量。

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);
于 2013-06-06T22:03:54.323 回答