एक एपीआई के साथ डी 3 में पुन: प्रयोज्य घटक कैसे बनाएं जो घटक के प्रत्येक उदाहरण में हेरफेर करता है?

Question

माइक के पास डी 3 में reusable components लिखने के बारे में एक उत्कृष्ट लेख है। लेख घटकों को कॉन्फ़िगर करने योग्य बनाने के तरीके और चयन में घटक को कैसे लागू करें के पैटर्न का वर्णन करता है।

पैटर्न एक घटक घटक को डेटा में शामिल करके कई चयनों के साथ पुन: उपयोग करने की अनुमति देता है; जैसे

var chart = myChart(); 

d3.select("div.chart") 
    .data(data) 
    .call(chart); 

मेरे घटक कार्यान्वयन ऐसा दिखाई देता है:

function myChart() { 

    function my(selection) { 
     selection.each(function(d, i) { 

      // generate chart here 
      // `d` is the data, `i` is the index, `this` is the element 

      var state = false; 

      var circle = d3.select(this).append("circle") 
       .attr("r", "10") 
       .style("fill", "#000") 
       .on("click", toggleState); 

      function toggleState() { 
       // this function updates the current instance trapped by this closure 
       (state = !state) 
        ? circle.style("fill", "#fff") 
        : circle.style("fill", "#000"); 
      } 
     }); 
    } 

    my.toggleState(i) { 
     // How do I access the `i`th instance of the component here? 
    } 

    return my; 
} 

क्या मैं प्राप्त करने के लिए चाहते हैं फोन करने वाले इस घटक अपने सूचकांक दिया की एक आवृत्ति हेरफेर करने की अनुमति है। उदाहरण के लिए, यदि चयनकर्ता div.chart उपरोक्त एक चयन देता है जिसमें दो तत्व हैं, तो मैं chart.toggleState(1) पर कॉल करना चाहता हूं और इसे चयन में दूसरा div अपडेट करना चाहता हूं।

बस इसलिए मैं किसी को भ्रमित नहीं करता हूं कि मैं ऐसा करने का प्रयास क्यों कर रहा हूं, कॉलर को दो प्रकार के घटकों को एक साथ सिंक्रनाइज़ करने की आवश्यकता है। कल्पना कीजिए कि मेरे पास एक घटक है जो एक सर्कल और दूसरे घटक द्वारा दर्शाया गया है जो आयताकार द्वारा दर्शाया जाता है। दो घटक स्वतंत्र होना चाहिए और एक दूसरे से बंधे नहीं होना चाहिए। मुझे 4 मंडल और 4 आयताकार बनाने में सक्षम होना चाहिए, और जब मैं एक आयत पर क्लिक करता हूं, तो मैं इंडेक्स ऑर्डर के आधार पर संबंधित सर्कल को अपडेट करने में सक्षम होना चाहता हूं। मैंने पहले से ही यह पता लगाया है कि किसी घटक से ईवेंट (d3.dispatch) कैसे बढ़ाएं और वर्तमान इंडेक्स को ईवेंट में पैरामीटर के रूप में प्रदान करें, लेकिन मुझे पता नहीं लगा है कि इसके सूचकांक को दिए गए घटक के विशिष्ट उदाहरण में कैसे कॉल किया जाए।

Answer 1

मुझे लगता है कि हर घटक को एक ही कक्षा देने का सबसे आसान तरीका होगा। फिर जब आप chart.toggleState(1) पर कॉल करते हैं तो आप d3.selectAll('.component').each(function(d, i) { if (i == index) doWhatever; });

Answer 2

किसी विशेष चयन के लिए डेटा चयन में है [0]। आप ith तत्व का चयन और एक विशेषता thusly सेट कर सकते हैं:

var i = 3 
d3.select(mySelection[0][i]).attr("fill","#fff") 

आप मुझे पता है, तो आप इस प्रकार toggleState लिख सकते हैं:

function toggleState(i) { 
    var toggle_me = d3.select(circles[0][i]) 
    var state = !(toggle_me.attr("fill") == "#fff") 
    toggle_me.attr("fill", (state ? "#fff": "#000")) 
} 

आप मैं नहीं जानता था, तो आप लिख सकते हैं इस प्रकार toggleState:

function toggleState() { 
    var toggle_me = d3.select(this) 
    var i = circles[0].findIndex(function(d) { 
     return d == toggle_me[0][0] 
    }) 
    if (i !== -1) { 
     var state = !(toggle_me.attr("fill") == "#fff") 
     toggle_me.attr("fill", (state ? "#fff": "#000")) 
     // Do additional functions with i here 
     //var triange = d3.select(triangles[0][i]) 
     //... 
    } 
} 

कार्य उदाहरण: https://jsfiddle.net/fd7fyeoq/

सा के लिए मुझे एक अलग संदर्भ में जवाब मिलता है: d3js : How to select nth element of a group?