डी 3 - ट्रिगर माउसओवर इवेंट

Question

मेरे पास डी 3 द्वारा प्रस्तुत एसवीजी ग्राफ़िक में यूएस राज्यों और काउंटी का नक्शा है। प्रत्येक पथ में माउसओवर, माउसआउट होता है और इसके साथ जुड़ी घटनाओं पर क्लिक करता है, साथ ही साथ FIPS आईडी कोड पथ आईडी के रूप में सेट किया जाता है।

मेरे पास एक jQuery स्वत: पूर्ण इनपुट है जहां उपयोगकर्ता किसी राज्य या काउंटी का नाम इनपुट कर सकता है। यह देखते हुए कि इनपुट, जो संबंधित FIPS आईडी उपलब्ध कराता है, मैं प्रोग्रामर रूप से माउसओवर ईवेंट कैसे ट्रिगर कर सकता हूं?

Answer 1

अपनी जावास्क्रिप्ट को इस तरह की संरचना दें कि माउसओवर ईवेंट जावास्क्रिप्ट फ़ंक्शन को कॉल करता है और फिर आप वही फ़ंक्शन किसी भी समय कॉल कर सकते हैं।

Answer 2

मुझे जवाब पता चला। मुख्य समस्या यह है कि डी 3 के पास jQuery के रूप में एक स्पष्ट trigger फ़ंक्शन नहीं है। हालांकि, आप इसे अनुकरण कर सकते हैं।

आप एक डी 3 पथ

d3.json("us-counties.json", function(json){ 

    thisObj._svg.selectAll("path") 
    .data(json.features) 
    .enter().append("path") 
    .attr("d", thisObj._path) 
    .attr("class", "states") 
    .attr("id", function(d){ 
     return d.id; //<-- Sets the ID of this county to the path 
    }) 
    .style("fill", "gray") 
    .style("stroke", "black") 
    .style("stroke-width", "0.5px") 
    .on("dblclick", mapZoom) 
    .on("mouseover", mapMouseOver) 
    .on("mouseout", mapMouseOut); 
}); 

के माध्यम से बनाया गया है और माउसओवर ईवेंट हैंडलर बदलता है कि भरण और स्ट्रोक रंग

var mapMouseOver(d){ 

    d3.selectAll($("#" + d.id)) 
    .style("fill", "red") 
    .style("stroke", "blue"); 

} 

आमतौर पर, सबसे ट्यूटोरियल उपयोग करने के लिए कहते हैं कि है कहो

d3.select(this)... 

लेकिन वास्तव में मूल्य का उपयोग भी करता है। आप एक ईवेंट हैंडलर कि आप नोड के आईडी हो जाता है, और

के माध्यम से यह ट्रिगर करते

$("#someDropdownSelect").change(someEventHandler) 

function someEventHandler(){ 

    //get node ID value, sample 
    var key = $(this) 
       .children(":selected") 
       .val(); 

    //trigger mouseover event handler 
    mapMouseOver({id : key}); 

} 

माउसओवर एक ड्रॉपडाउन चयन के आधार पर घटना को निष्पादित करेंगे

Answer 3

आप सीधे पर घटना भेजने से इस लक्ष्य को हासिल कर सकते हैं वांछित तत्व:

var event = document.createEvent('SVGEvents'); 
event.initEvent(eventName,true,true); 
element.dispatchEvent(event); 

में और अधिक विस्तार देखें इस blog post

Answer 4

स्टीव Greatrex के समाधान जब तक मेरे लिए काम किया आईओएस 9, लेकिन आईओएस 10 पर नहीं।

मेरे कोड को डिबग करने के बाद और कुछ शोध ऐसा लगता है कि मुद्दा यह था कि createEvent और initEvent फ़ंक्शंस को documentation के अनुसार बहिष्कृत किया गया है।

इस लेखन का नया तरीका है:

बनाने और घटना कंस्ट्रक्टर्स साथ ईवेंट ट्रिगर के नए तरीके के बारे में

var event = new MouseEvent('SVGEvents', {}); 
element.dispatchEvent(event); 

अधिक विवरण here पाया जा सकता है।