डी 3 घटनाओं को सही तरीके से जोड़ने और उपयोग करने के लिए कैसे करें?

Question

मुझे डी 3 घटनाओं और प्रेषण कार्यों का उपयोग करके समझ में परेशानी हो रही है। मेरे पास एक चार्ट उदाहरण है कि मैं कॉल पर काम कर रहा हूं: "Vertical Bar Charts With Legends।"

चार्ट और किंवदंतियों को चित्रित करना काफी आसान था, लेकिन मैं प्रत्येक बार को हाइलाइट करने की क्षमता जोड़ना चाहता हूं क्योंकि मैं चार्ट के दाईं ओर स्थित सहसंबंधित टेक्स्ट किंवदंती को माउसओवर करता हूं।

मैंने सभी घटना प्रलेखन के माध्यम से पढ़ा है और यहां तक ​​कि कई उदाहरणों को भी देखा है, जिनमें से अधिकांश बहुत जटिल हैं, लेकिन मुझे कुछ याद आ रहा है। क्या किसी को यह पता चलेगा कि टेक्स्ट लीजेंड माउसओवर कार्यक्षमता को सर्वोत्तम तरीके से कैसे पूरा किया जाए जो घटनाओं को स्वचालित रूप से संबंधित वर्टिकल बार के रंगों को बदलने के लिए भेजता है?

Answer 1

यह प्रश्न d3-js Google समूह में one you posted के समान है। मैंने जो लिखा है उसे डुप्लिकेट किए बिना, मैं दोहरा दूंगा कि आप शायद d3.dispatch नहीं चाहते हैं; यह कस्टम इवेंट एब्स्ट्रैक्शन (जैसे ब्रश और व्यवहार) के लिए है। देशी घटनाओं का उपयोग करना आसान होगा।

आप अपनी कथा माउसओवर पर, तो टूटने चरणों में समस्या इसी बार का रंग बदलना चाहते हैं:

1. कथा पर माउसओवर का पता लगाने।
2. संबंधित बार का चयन करें।
3. बार के भरने वाले रंग को बदलें।

सबसे पहले, पौराणिक तत्वों पर "माउसओवर" घटनाओं को सुनने के लिए selection.on का उपयोग करें। जब आपका माउस एक किंवदंती तत्व पर जाता है तो आपका श्रोता फ़ंक्शन कॉल किया जाएगा, और दो तर्कों के साथ कहा जाएगा: डेटा (d) और अनुक्रमणिका (i)। आप d3.select के माध्यम से संबंधित बार का चयन करने के लिए इस जानकारी का उपयोग कर सकते हैं। अंत में, नए रंग के साथ "भरें" शैली को बदलने के लिए selection.style का उपयोग करें।

यदि आप सुनिश्चित नहीं हैं कि किंवदंती माउसओवर पर संबंधित बार का चयन कैसे करें, तो आमतौर पर कई विकल्प होते हैं। सूचकांक द्वारा चयन करना सबसे सरल है, यह मानते हुए कि पौराणिक तत्वों की संख्या और रेक्ट तत्वों की संख्या समान है, और वे एक ही क्रम में हैं। उस मामले में, अगर एक स्थानीय चर rect रेक्ट तत्व शामिल हैं, आप कह सकते हैं:

function mouseover(d, i) { 
    d3.select(rect[0][i]).style("fill", "red"); 
} 

आप सूचकांक पर भरोसा नहीं करना चाहते हैं, तो एक और विकल्प मिलान समान डेटा के आधार पर बार के लिए स्कैन किया जा सके। यह selection.filter उपयोग करता है:

function mouseover(d, i) { 
    rect.filter(function(p) { return d === p; }).style("fill", "red"); 
} 

फिर भी एक और विकल्प प्रत्येक एक अद्वितीय ID आयताकार, और फिर आईडी के आधार पर चुनते दे रहा है। उदाहरण के लिए, प्रारंभ पर, आप कह सकते हैं:

rect.attr("id", function(d, i) { return "rect-" + i; }); 

उसके बाद, आप माउसओवर पर आईडी द्वारा रेक्ट चुन सकते हैं:

function mouseover(d, i) { 
    d3.select("#rect-" + i).style("fill", "red"); 
} 

ऊपर के उदाहरण काल्पनिक है के बाद से मैं सूचकांक का इस्तेमाल किया आईडी उत्पन्न करने के लिए विशेषता (इस मामले में, सूचकांक द्वारा चयन की पहली तकनीक का उपयोग करने के लिए यह सरल और तेज़ है)। एक और यथार्थवादी उदाहरण होगा यदि आपके डेटा का नाम संपत्ति हो; आप आईडी विशेषता उत्पन्न करने के लिए d.name का उपयोग कर सकते हैं, और इसी प्रकार आईडी द्वारा चयन करें। यदि आप एक अद्वितीय आईडी उत्पन्न नहीं करना चाहते हैं तो आप अन्य विशेषताओं या वर्ग द्वारा भी चयन कर सकते हैं।

Answer 2

माइक का जवाब बहुत अच्छा है।

मैं इसे एक ग्रिड में एक सेल के चयन के लिए इस के साथ आ रहा ड्राइंग इस्तेमाल किया:

.on('click', (d, i) -> 
     console.log("X:" + d.x, "Y:" + d.y) #displays the cell x y location 
     d3.select(this).style("fill", "red"); 

तो में मैं घटना श्रोता जोड़ा जब मैं डेटा प्रवेश कर रहा हूँ और d3.select का उपयोग कर (यह) । , इस सामान पर अपने सभी सहायता के लिए धन्यवाद

vis.selectAll("rect") 
    .data(singleArray) 
    .enter().append("svg:rect") 
    .attr("stroke", "none") 
    .attr("fill", (d) -> 
     if d.lifeForm 
     return "green" 
     else 
     return "white") 
    .attr("x", (d) -> xs(d.x)) 
    .attr("y", (d) -> ys(d.y)) 
    .attr("width", cellWidth) 
    .attr("height", cellHeight) 
    .on('click', (d, i) -> 
     console.log("X:" + d.x, "Y:" + d.y) 
     d3.select(this).style("fill", "red"); 
     return 
    )