डी 3 प्लगइन कैसे बनाएं?

Question

मैं एक साधारण डी 3 प्लगइन बनाना चाहता हूं लेकिन इसे कैसे करना है इस बारे में जानकारी नहीं मिल सकती।

यह बहुत सरल होने की जरूरत है:

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

सिर्फ

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

मैं यह कर होगा कैसे में अनुवाद करना चाहिए?

Answer 1

स्रोत के माध्यम से खुदाई करना पड़ा लेकिन अंततः इसे मिला।

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

Jsbin here

भी ध्यान रखें कि अगर आप भी चाहते हैं के बाद आप .enter() आप d3.selection.enter.prototype सौंपने होंगे लागू करने के लिए प्लगइन।

यदि आप दोनों परिदृश्यों में अपने प्लग-इन उपलब्ध चाहते हैं (मेरे मामले में):

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

Answer 2

तरह से मैं यह दस्तावेज को देखा है: द्वारा

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

बाद:

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

या

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

हालांकि मुझे जॉर्ज के समाधान को बेहतर पसंद है।

Answer 3

माइक Bostock पुन: प्रयोज्य चार्ट http://bost.ocks.org/mike/chart/

की ओर लिखा था मैं एक बहुत ही सरल उदाहरण d3 प्लगइन बनाने के लिए इस तरीके का अनुसरण किया, कृपया इस ब्लॉक देखें: http://bl.ocks.org/cpbotha/5073718 (और स्रोत सार: https://gist.github.com/cpbotha/5073718)।

माइक Bostock के अनुसार, पुन: प्रयोज्य चार्ट "गेटर-सेटर विधियों के साथ बंद" के रूप में लागू किया जाना चाहिए। मैंने ठीक उसी तरह मेरे उदाहरण में किया था।

@Wex का उत्तर इस पैटर्न का भी पालन करता है, सिवाय इसके कि यह बंद विचार को प्रदर्शित नहीं करता है, क्योंकि मूल प्रश्न ने किसी भी गुण की आवश्यकता निर्दिष्ट नहीं की है।