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);
      };
})();