D3.js ब्रश

Question

की समाशोधन अक्षम करें मैं उपयोगकर्ताओं को धुरी पर मानों की एक श्रृंखला का चयन करने की अनुमति देने के लिए एक D3.js ब्रश का उपयोग करना चाहता हूं। डिफ़ॉल्ट रूप से, ब्रश के बाहर क्लिक करने से इसे साफ़ किया जाता है, ताकि कोई सीमा नहीं चुनी जा सके।

हालांकि, मैं इस व्यवहार को समायोजित करना चाहता हूं ताकि ब्रश के बाहर क्लिक करने से ब्रश सीमा में कोई बदलाव न हो। असल में, ब्रश को साफ़ करने का कोई तरीका नहीं होना चाहिए, कुछ सीमा हमेशा चुनी जानी चाहिए।

मेरा मानना ​​है कि मुझे किसी भी तरह से समाशोधन को अक्षम करने के लिए brush event में हुक करना है, लेकिन मुझे वास्तव में यह नहीं पता कि इसके बारे में कैसे जाना है।

यहां इंटरफ़ेस का एक उदाहरण है जिसके बारे में मैं बात कर रहा हूं (Fiddle)। जब आप ब्लैक बार के बाएं या दाएं क्लिक करते हैं, तो ब्रश साफ़ हो जाता है और बार गायब हो जाता है।

मैं इस व्यवहार को निष्क्रिय कर सकते हैं?

Answer 1

डी 3 ब्रश डिज़ाइन कॉल 'ब्रशमोव()' ब्रश तत्व पर माउस दबाता है (यानी 'mousedown.brush' ईवेंट पर)। यदि प्रभावी रूप से पिछले ब्रश सीमा को रीसेट करने की ओर जाता है।

एक संभावित कामकाज मूल mousedown.brush हैंडलर को कस्टम के साथ प्रतिस्थापित करना है। प्रारंभिक मूसडाउन के बाद माउस को स्थानांतरित करने के बाद कस्टम हैंडलर केवल मूल हैंडलर को कॉल करेगा।

var brushNode = chart.append("g") 
    .call(brush); 

brushNode 
    .selectAll("rect") 
    .attr("y", -10) 
    .attr("height", 10); 

// store the reference to the original handler 
var oldMousedown = brushNode.on('mousedown.brush'); 

// and replace it with our custom handler 
brushNode.on('mousedown.brush', function() { 
    brushNode.on('mouseup.brush', function() { 
     clearHandlers(); 
    }); 

    brushNode.on('mousemove.brush', function() { 
     clearHandlers(); 
     oldMousedown.call(this); 
     brushNode.on('mousemove.brush').call(this); 
    }); 

    function clearHandlers() { 
     brushNode.on('mousemove.brush', null); 
     brushNode.on('mouseup.brush', null); 
    } 
}) 

demo देखें।