कहता है कि मैं नेविगेशन मेनू के लिए नियमित होवर प्रभाव बनाना चाहता हूं, लेकिन सीएसएस के बजाय मैं प्रभाव को "नरम" करने के लिए डी 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"); });
मैं नहीं जानता कि सही जवाब है, लेकिन मुझे लगता है mouseout लागू और अवधि से पहले पूरा हो गया है (1s) की माउसओवर पूरा हो गया है। शायद माउसआउट के लिए 1100 अवधि बनाओ? – cmonkey
इसके अलावा, http://bost.ocks.org/mike/transition/ पर पढ़ने से पता चलता है कि d3 संस्करण 2 और 3 के बीच अंतर हैं। आप किस संस्करण का उपयोग कर रहे हैं? – cmonkey
या तो कोई सही उत्तर नहीं है लेकिन: यदि, आपके उदाहरण में, आप एचटीएमएल (एसवीजी के बजाए) का उपयोग कर रहे हैं, तो आप डी 3 संक्रमण को पूरी तरह से छोड़ सकते हैं और इसके बजाय सीएसएस संक्रमण का उपयोग कर सकते हैं। यह निश्चित रूप से आपके द्वारा की जा रही समस्या को हल करेगा, और यह अधिक प्रदर्शनकारी होगा। पुराने ब्राउज़र के उपयोगकर्ताओं को संक्रमण नहीं मिलेगा, लेकिन ओह कुएं ... – meetamit