डी 3

Question

के साथ तीर फ़ंक्शंस का उपयोग करना क्या यह संभव है? मुझे यकीन नहीं है, क्योंकि डी 3 this rebindings का भारी उपयोग करता है और यह ES6 spec के साथ संघर्ष करता है।

उदाहरण के लिए निम्नलिखित ठीक काम करता है:

// Working fine 
var data = [1,2,3] 
var svg = d3.select('body').append('svg').attr('height', 500).attr('width', 500).style('background-color', 'orange'); 
var gs = svg.selectAll('g').data(data).enter(); 
gs.append('circle') 
    .attr('cx', function() { return Math.random()*500; }) 
    .attr('cy', function() { return Math.random()*500; }) 
    .attr('r', function() { return Math.random()*100; }) 
    .each(function() { console.log(this); }); // this is bound to the current element in the enter selection 

जबकि निम्न काम नहीं करता है के रूप में उम्मीद (this प्रवेश चयन में वर्तमान तत्व के लिए बाध्य नहीं है, लेकिन Window वस्तु के लिए):

var data = [1,2,3] 
var svg = d3.select('body').append('svg').attr('height', 500).attr('width', 500).style('background-color', 'blue'); 
var gs = svg.selectAll('g').data(data).enter(); 
gs.append('circle') 
    .attr('cx',() => Math.random()*500) 
    .attr('cy',() => Math.random()*500) 
    .attr('r',() => Math.random()*100) 
    .each(() => console.log(this)); // this is bound to Window object 

संबंधित पहेली here।

Answer 1

यदि आप वर्तमान तत्व के this तक पहुंच की आवश्यकता नहीं है तो आप तीर कार्यों का उपयोग कर सकते हैं।

मौजूदा तत्वों के this तक पहुंचने के लिए पुराने स्टाइल फ़ंक्शंस में फ़ॉलबैक।

या उपयोग करने के लिए स्पष्ट बाध्यकारी अपने समारोह अनुमति देने के लिए उपयोग करते हैं (तीर समारोह नहीं) जो कुछ भी वस्तु आप .bind()

का उपयोग कर करना चाहते हैं this को आसानी से पहुँच आप d3 नाम या वर्ग चयनकर्ताओं का उपयोग करने का विकल्प होता है के साथ काम करने से बचने के लिए कोई तत्व उदाहरण:

var stuffINeed = svg.selectAll('.someClass'); 

Answer 2

तीर फ़ंक्शन के व्यवहार को संशोधित करना संभव नहीं है। उनकी बाध्यकारी 'हार्डकोडेड' है और bind विधि के साथ पुन: बाध्यकारी द्वारा या किसी अन्य फ़ंक्शन विधि को आवेदक द्वारा बदला जा सकता है जो स्पष्ट निष्पादन संदर्भ (उदा। apply) स्वीकार करता है। किसी भी बाध्य समारोह के बारे में भी कहा जा सकता है - एक बार बाध्य, लौटा हुआ कार्य हमेशा बाध्य है।

क्या यह संभव है?

मन में ऊपर के साथ

, अगर d3 bind आईएनजी का उपयोग करता है सुविधाजनक श्रृंखलन व्यवहार प्रदान करने के लिए, इस नहीं तीर कार्यों का उपयोग कर जब तक d3 के एपीआई किसी तरह उन्हें समायोजित करने के लिए संशोधित किया गया है प्राप्त किया जा सकता।

Answer 3

आप d3v4 का उपयोग कर रहे हैं, तो आप इस तरह वर्तमान डोम नोड पहुँच सकते हैं:

gs.append('circle') 
    .attr('cx',() => Math.random()*500) 
    .attr('cy',() => Math.random()*500) 
    .attr('r',() => Math.random()*100) 
    .each((d, i, j) => console.log(j[i])); 
     // j is current group, i is current index