Jak zrobić wtyczkę d3?

Question

Chciałbym zrobić prostą wtyczkę d3, ale nie mogę znaleźć informacji, jak to zrobić.

To musi być bardzo prosty:

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

należy po prostu przekłada się

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

Jak to zrobić?

Answer 1

Musiałem przejść przez źródło, ale w końcu je otrzymałem.

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

Jsbin here

również pamiętać, że jeśli chcemy także wtyczki do zastosowania po .enter() trzeba przypisać d3.selection.enter.prototype.

Jeśli (jak w moim przypadku), które chcesz swoje wtyczki dostępne w obu scenariuszach:

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

Answer 2

Sposób Widziałem to udokumentowane:

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

Obserwowani przez:

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

lub

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

Chociaż bardziej podoba mi się rozwiązanie George'a.

Answer 3

Mike Bostock napisał Ku wielorazowych Charts http://bost.ocks.org/mike/chart/

Śledziłem ten wzór, aby niezwykle prosty przykład wtyczki D3, proszę zobaczyć ten blok: http://bl.ocks.org/cpbotha/5073718 (i sens źródło: https://gist.github.com/cpbotha/5073718).

Według Mike'a Bostocka, tablice wielokrotnego użytku powinny być implementowane jako "zamknięcia z metodami ustawiającymi getter". Zrobiłem dokładnie to w moim przykładzie powyżej.

Odpowiedź @Wexa również jest zgodna z tym wzorcem, z tym, że nie demonstruje idei zamknięcia, ponieważ pierwotne pytanie nie wymagało żadnych właściwości.