2013-02-18 33 views
5

कहता है कि मैं नेविगेशन मेनू के लिए नियमित होवर प्रभाव बनाना चाहता हूं, लेकिन सीएसएस के बजाय मैं प्रभाव को "नरम" करने के लिए डी 3 संक्रमण का उपयोग करता हूं। यह .on -method के लिए mouseover और mouseout का उपयोग करके ठीक काम करता है। हालांकि, समस्या यह है कि यदि संक्रमण से पहले माउस आच्छादित लिंक छोड़ देता है तो संक्रमण फंस जाता है। कोई उस दुष्प्रभाव से कैसे बचता है?डी 3 माउसओवर संक्रमण "अटक गया"

उदाहरण के लिए, इस कोड के साथ, नीचे सीमा अभी भी नारंगी में प्रदर्शित किया जाता है के बाद भी माउस, कहीं और ले जाया गया है, यदि आप इसे बहुत तेजी से कार्य करें:

d3.selectAll("a") 
    .on("mouseover", function() { 
     d3.select(this) 
     .style("border-bottom-color", "#fff") 
     .transition() 
     .duration(1000) 
     .style("border-bottom-color", "#B23600"); }) 
    .on("mouseout", function() { 
     d3.select(this) 
     .style("border-bottom-color", "#fff"); }); 
+0

मैं नहीं जानता कि सही जवाब है, लेकिन मुझे लगता है mouseout लागू और अवधि से पहले पूरा हो गया है (1s) की माउसओवर पूरा हो गया है। शायद माउसआउट के लिए 1100 अवधि बनाओ? – cmonkey

+0

इसके अलावा, http://bost.ocks.org/mike/transition/ पर पढ़ने से पता चलता है कि d3 संस्करण 2 और 3 के बीच अंतर हैं। आप किस संस्करण का उपयोग कर रहे हैं? – cmonkey

+0

या तो कोई सही उत्तर नहीं है लेकिन: यदि, आपके उदाहरण में, आप एचटीएमएल (एसवीजी के बजाए) का उपयोग कर रहे हैं, तो आप डी 3 संक्रमण को पूरी तरह से छोड़ सकते हैं और इसके बजाय सीएसएस संक्रमण का उपयोग कर सकते हैं। यह निश्चित रूप से आपके द्वारा की जा रही समस्या को हल करेगा, और यह अधिक प्रदर्शनकारी होगा। पुराने ब्राउज़र के उपयोगकर्ताओं को संक्रमण नहीं मिलेगा, लेकिन ओह कुएं ... – meetamit

उत्तर

3

मुझे लगता है कि क्या चल रहा है कि जब है आपके पास .transition है केवल mouseover, पर संक्रमण तब भी नहीं चला है जब आप 1000ms से पहले समाप्त हो जाते हैं। तो जब आप जल्दी छोड़ते हैं, तो माउसओवर संक्रमण अभी भी चल रहा है, और इस संक्रमण को ओवरराइड करने के लिए माउसआउट ईवेंट पर कोई संक्रमण कॉल नहीं है। (जाहिरा तौर पर नहीं भी mouseout घटना .transitionmouseover घटना से जुड़ी बंद हो जाएगा।)

लेकिन, जैसा कि आप का उल्लेख किया है, जब आप mouseout घटना पर एक transition डाल करते हैं, समस्या दूर चला जाता है। और मेरा मानना ​​है कि ऐसा इसलिए है क्योंकि माउसआउट transition mouseover.transition पर प्राथमिकता लेता है, इसलिए mouseout10 पर .transition होने पर mouseout ईवेंट वापस नियंत्रण में डालता है।

यदि आप mouseout ईवेंट पर .transition पर टिप्पणी करते हैं तो आप इसे यहां कार्रवाई में देख सकते हैं।

http://jsfiddle.net/Ldmv6/1/

इसके अलावा लायक पढ़ने Scott Murray's आगामी d3 किताब से अध्याय 10 है: http://ofps.oreilly.com/titles/9781449339739/_interactivity.html

+0

स्पष्टीकरण के लिए बहुत बहुत धन्यवाद! –

+0

माउसआउट पर संक्रमण जोड़ने से इस उदाहरण में समस्या हल नहीं होती है http://jsfiddle.net/t466vL71/ – bartburkhardt

+0

ठीक है, हल किया गया है कि गतिशील रंग दृष्टिकोण को हटाकर http://jsfiddle.net/w9q6uh25/ – bartburkhardt