Come creare un plugin d3?

Question

Vorrei creare un semplice plugin d3 ma non riesco a trovare informazioni su come farlo.

ha bisogno di essere molto semplice:

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

deve solo tradurre in

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

Come faccio a fare questo?

Answer 1

Dovevo andare a scavare nella fonte ma alla fine ce l'ho fatta.

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

Jsbin here

Si noti inoltre che se si vuole anche il plugin per applicare dopo aver .enter() è necessario assegnare il d3.selection.enter.prototype.

Se (come nel mio caso) si desidera che il plug-in disponibile in entrambi gli scenari:

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

Answer 2

Il modo in cui l'ho visto documentato:

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

seguito da:

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

o

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

Anche se mi piace la soluzione di George meglio.

Answer 3

Mike Bostock ha scritto Verso Grafici riutilizzabili http://bost.ocks.org/mike/chart/

Ho seguito questo modello per fare estremamente semplice plugin esempio D3, si prega di consultare questo blocco: http://bl.ocks.org/cpbotha/5073718 (e la sostanza fonte: https://gist.github.com/cpbotha/5073718).

Secondo Mike Bostock, le tabelle riutilizzabili dovrebbero essere implementate come "chiusure con metodi getter-setter". Ho fatto esattamente questo nel mio esempio sopra.

La risposta di @Wex segue anche questo schema, tranne che non dimostra l'idea di chiusura, poiché la domanda originale non specificava che richiedeva proprietà.