How to make a d3 plugin?

Question

I would like to make a simple d3 plugin but can't find information on how to do it.

It needs to be very simple:

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

should just translate to

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

How would I do this?

Answer 1

Had to go digging through the source but got it finally.

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

Jsbin here

also note that if you also want the plugin to apply after you .enter() you need to assign the d3.selection.enter.prototype.

If (as in my case) you want your plugin available in both scenarios:

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

Answer 2

Mike Bostock wrote Towards Reusable Charts http://bost.ocks.org/mike/chart/

I followed this pattern to make an extremely simple example d3 plugin, please see this block: http://bl.ocks.org/cpbotha/5073718 (and the source gist: https://gist.github.com/cpbotha/5073718).

According to Mike Bostock, reusable charts should be implemented as "closures with getter-setter methods". I did exactly that in my example above.

The answer of @Wex follows this pattern too, except that it doesn't demonstrate the closure idea, as the original question did not specify requiring any properties.