d3.js - एसवीजी कंटेनर पर इन तत्वों को माउसओवर करते समय मैं कर्सर को हाथ में कैसे सेट कर सकता हूं?

Question

मैंने एसवीजी कंटेनर पर कुछ मंडलियों को आकर्षित करने के लिए d3.js का उपयोग किया है।

मैंने सरल कंसोल संदेशों को मुद्रित करने के लिए इन मंडलियों पर माउसओवर व्यवहार सफलतापूर्वक सेट कर दिया है। जब मैं माउसओवर (और माउसआउट) करता हूं तो मुझे उन कंसोल संदेशों को देखा जाता है, इसलिए मुझे पता है कि वे ठीक से काम कर रहे हैं।

हालांकि, उस कंसोल संदेशों को मुद्रित करने के बजाय, मैं कर्सर को हाथ में बदलना चाहता हूं, जब मैं उन्हें माउसवर करता हूं, और जब मैं माउस आउट करता हूं तो कर्सर को सामान्य तीर में बदलना चाहता हूं। नीचे दिए गए मेरे कोड को देखते हुए, मैं इसे कैसे कर सकता हूं?

माउसओवर पर, मैं जानता हूँ कि मैं cursorpointer करने और mouseout पर शैली की संपत्ति को बदलने की जरूरत है, मैं मैं default करने के लिए इसे बदलने की जरूरत है पता है, लेकिन मैं मैं इसे कैसे करना चाहिए की वाक्य रचना पता नहीं है। क्या कोई इसे मुझे समझा सकता है? नीचे मेरा कोड है।

 var myCircle = svgContainer.selectAll(".dots") 
      .data(myDataList).enter().append("circle") 
      .attr("class", "dots") 
      .attr("cx", function(d, i) {return d.centerX}) 
      .attr("cy", function(d, i) {return d.centerY}) 
      .attr("r", 5) 
      .attr("stroke-width", 0) 
      .attr("fill", function(d, i) {return "red"}) 
      .style("display", "block"); 



     myCircle.on({ 
      "mouseover": function(d) { 
       console.log('Hello World!'); // What do I change this to? 
      }, 
      "mouseout": function(d) { 
       console.log('Goodbye World!'); // What do I change this to? 
      } 
      } 
     ); 

Answer 1

आप इस तरह यह कर सकते हैं:

myCircle.on({ 
     "mouseover": function(d) { 
     d3.select(this).style("cursor", "pointer"); 
     }, 
     "mouseout": function(d) { 
     d3.select(this).style("cursor", "default"); 
     } 
    }); 

काम कर कोड here

Answer 2

आप सिर्फ इस कोशिश की:

var myCircle = svgContainer.selectAll(".dots") 
     .data(myDataList).enter().append("circle") 
     .attr("class", "dots") 
     .attr("cx", function(d, i) {return d.centerX}) 
     .attr("cy", function(d, i) {return d.centerY}) 
     .attr("r", 5) 
     .attr("stroke-width", 0) 
     .attr("fill", function(d, i) {return "red"}) 
     .style("display", "block") 
     .style("cursor", "pointer"); 

क्योंकि जब आप के लिए एक सूचक के रूप में कर्सर को परिभाषित आपकी ऑब्जेक्ट, जब आप "माउसओवर" करते हैं, तो पॉइंटर पॉइंटर बन जाता है।

यहाँ देखें एक उदाहरण: https://jsfiddle.net/oj5vubxn/2/

Answer 3

क्यों आप बस सीएसएस इसे संभाल न दें?

.dots { 
    cursor: pointer; 
} 

Answer 4

इस मामले में शैली को गतिशील रूप से सेट करना कोई समझ नहीं आता है। यदि माउस तत्व से अधिक है, तो कर्सर शैली लागू होती है। अन्यथा, आप किसी अन्य तत्व पर होवर कर रहे हैं और उस तत्व के लिए कर्सर शैली लागू होती है। तो माउसओवर घटनाओं के आधार पर शैली को गतिशील रूप से सेट करने का कोई कारण नहीं है। आप शैली को प्रारंभिक रूप से सेट भी कर सकते हैं।

myCircle.style("cursor", "pointer"); 

या, बस सीएसएस फ़ाइल में शैली को सेट करें क्योंकि एक और उत्तर इंगित किया गया है।