如何制作d3插件？

Question

我想制作一个简单的d3插件,但无法找到有关如何操作的信息.

它需要非常简单:

s.append('text').text("Some Text").editable();

应该转换为

s.append('text').text("Some Text").attr('data-editable', true);

我该怎么做？

Answer 1

不得不去挖掘源头但最终得到它.

(function() {
  d3.selection.prototype.editable = function() {
    return this.attr('data-editable', true);
  };
})();

Jsbin在这里

另请注意,如果您还需要在.enter()您需要分配之后应用插件d3.selection.enter.prototype.

如果(在我的情况下)你希望你的插件在两种情况下都可用:

(function() {
    d3.selection.prototype.editable = d3.selection.enter.prototype.editable = function() {
        return this.attr('data-editable', true);
      };
})();

Answer 2

Mike Bostock写了"走向可重复使用的图表" http://bost.ocks.org/mike/chart/

我按照这个模式制作了一个非常简单的示例d3插件,请看这个块:http://bl.ocks.org/cpbotha/5073718(和源要点:https://gist.github.com/cpbotha/5073718).

根据Mike Bostock的说法,可重用的图表应该被实现为"使用getter-setter方法的闭包".我在上面的例子中做到了这一点.

@Wex的答案也遵循这种模式,除了它没有证明闭包的想法,因为原始问题没有指明需要任何属性.