D3 शिक्षार्थी यहाँ। मैं विशेष वर्ग के साथ सभी तत्वों का चयन करने की कोशिश कर रहा हूं ("चाल" कहें), उन तत्वों में से कुछ पर कुछ घटनाओं को ट्रिगर करें (जब रंग परिवर्तन पर क्लिक किया जाता है)। अब मैं उन तत्वों के लिए एक नया वर्ग असाइन करना चाहता हूं (कहें "हैमोव्ड") जिस पर ईवेंट ट्रिगर किया गया था यानी क्लिक किया गया था

यहाँ मेरा परीक्षण है। लेकिन यह काम नहीं करता

d3.selectAll(".move")               
.on("click", function() {
d3.select(this)
           .classed("hasmoved",true) 
          .style("fill","rgba(48,63,43,0.5)")
    .attr("transform",'translate(700)')})


d3.selectAll(".hasmoved")
.on("click", function() {
        d3.select(this)    
        .style("fill","pink")})
2
Zubair 31 अक्टूबर 2019, 10:35

1 उत्तर

सबसे बढ़िया उत्तर

एक उचित इंडेंटेशन यहां मदद करेगा:

d3.selectAll(".move")
  .on("click", function() {
    d3.select(this)
      .classed("hasmoved", true)
      .style("fill", "rgba(48,63,43,0.5)")
      .attr("transform", 'translate(700)')
  });

d3.selectAll(".hasmoved")
  .on("click", function() {
    d3.select(this)
      .style("fill", "pink")
  });

जैसा कि हम देख सकते हैं, d3.selectAll(".hasmoved").on(//etc... ब्लॉक पहली on विधि से बाहर है। इसलिए, वह ब्लॉक तुरंत चलेगा, ऐसे क्षण में जब कहीं भी hasmoved क्लास नहीं होगी, क्योंकि उपयोगकर्ता ने अभी तक कुछ भी क्लिक नहीं किया है।

आसान समाधान बस प्रत्येक क्लिक किए गए तत्व के लिए on विधि सेट करना है:

d3.selectAll(".move")
  .on("click", function() {
    d3.select(this)
      .classed("hasmoved", true)
      .style("fill", "rgba(48,63,43,0.5)")
      .attr("transform", 'translate(700)')
      .on("click", function() {
        d3.select(this)
          .style("fill", "pink")
      });
  });
2
Gerardo Furtado 31 अक्टूबर 2019, 08:03