Как сделать плагин d3?

Я хотел бы сделать простой плагин d3, но не могу найти информацию о том, как это сделать.

Это должно быть очень просто:

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

должен просто перевести на

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

Как мне это сделать?

Ответ 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);
      };
})();

Ответ 2

Майк Босток написал "К многоразовым диаграммам" http://bost.ocks.org/mike/chart/

Я следил за этим шаблоном, чтобы сделать чрезвычайно простой пример плагина d3, см. этот блок: http://bl.ocks.org/cpbotha/5073718 (и исходный смысл: https://gist.github.com/cpbotha/5073718).

По словам Майка Бостока, схемы многократного использования должны быть реализованы как "закрытие с помощью методов getter-setter". Я сделал именно это в моем примере выше.

Ответ @Wex также следует за этим шаблоном, за исключением того, что он не демонстрирует идею закрытия, поскольку в исходном вопросе не указывалось требование каких-либо свойств.

Ответ 3

То, как я видел, это документировано:

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

Далее следуют:

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

или

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

Хотя мне нравится решение Джорджа лучше.