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 here

另请注意，如果您还希望在.enter()之后应用该插件，则需要指定d3.selection.enter.prototype。

如果（在我的情况下）你希望你的插件在两种情况下都可用：

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

Answer 2

迈克博斯托克写了“走向可重复使用的图表”http://bost.ocks.org/mike/chart/

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

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

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

Answer 3

我看到它记录的方式：

function editable() {
    d3.select(this).attr("data-editable", true);
}

其次是：

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

或

d3.selectAll("text").each(editable);

虽然我更喜欢乔治的解决方案。

如何制作d3插件？

3 个答案: