d3.behavior.zoom के लिए पैन को अक्षम कैसे करें?

Question

यह प्रश्न this one के समान दिखता है, लेकिन मैं अभी भी यह पता लगाने में सक्षम नहीं हूं कि d3.behavior.zoom का उपयोग करना संभव है लेकिन पैन क्षमता के बिना। दूसरे शब्दों में मैं केवल पहिया का उपयोग करके ज़ूम-इन/आउट करना चाहता हूं।

इसका कारण यह है कि मैं "ज़ूम करने योग्य" क्षेत्र पर ब्रश करने में सक्षम होना चाहता हूं।

धन्यवाद!

Answer 1

कहो तुम एक ज़ूम व्यवहार परिभाषित किया है:

var zoom = d3.behavior.zoom().on('zoom', update); 

जब आप एक चयन करने के लिए ज़ूम व्यवहार लागू होते हैं, आपको लगता है कि वह आंतरिक रूप से उपयोग करता है का पता लगाने और कुछ बातचीत करने के लिए प्रतिक्रिया करने के लिए घटना श्रोताओं का पंजीकरण रद्द कर सकते हैं। आपके मामले में, आप ऐसा कुछ करना चाहते हैं:

selection.call(zoom) 
    .on("mousedown.zoom", null) 
    .on("touchstart.zoom", null) 
    .on("touchmove.zoom", null) 
    .on("touchend.zoom", null); 

मुझे यकीन नहीं है कि आप स्पर्श ईवेंट को हटाना चाहते हैं। ऐसा करने से डबल टैप ज़ूमिंग खत्म हो सकता है। आपको उन लोगों के साथ प्रयोग करना चाहिए।

Answer 2

मुझे लगता है कि यह इस समस्या से निपटने के लिए मिले कामकाज को अच्छी तरह साझा करना अच्छा होगा।

zoom.on("zoom",null); 
selection.call(zoom); 

और इसे फिर से सक्रिय करने brushend घटना पर: क्या मैंने किया था ब्रश की शुरुआत पर श्रोता का उपयोग ज़ूम "निष्क्रिय" करने के लिए है।

वहाँ ध्यान में रखना एक और चाल है और तथ्य यह है कि यह पिछले वैध ज़ूम बातचीत के पैमाने और संक्रमण मूल्यों को बचाने के लिए, ताकि आप जब ब्रश को सक्रिय करने के लिए उन मूल्यों का उपयोग महत्वपूर्ण है से आता है brushend घटना इस

zoom.scale(lastEventScale).translate(lastEventTranslate).on("zoom",drawZoom); 
selection.call(scatterZoom); 

मैं इस समस्या का अन्य अधिक "सुंदर" समाधान सुनवाई प्यार होता की तरह पर।

Answer 3

मुझे मिला एक समाधान ज़ूम-सक्षम तत्व (वे भाई बहन होना चाहिए) के सामने एक रेक्ट तत्व चिपकाना था और इसे 'पारदर्शी' पर सेट करना था, जब मैं ज़ूम इंटरैक्शन को अक्षम करना चाहता था या 'कोई नहीं' , जब मैं ज़ूम बातचीत को सक्षम करना चाहता था। । मैं तो बस किया था मेरे मामले के लिए

if (chart._disableZoom) { 
    var rootPanel = d3.select('.rootPanel'); // this is the parent of the element that can be zoomed and panned 
    if (!rootPanel.select('.stopEventPanel').node()) { // create panel if it doesn't exist yet 
     //.stopEventPanel is appended next to the zoom-enabled element 
     rootPanel.append('rect').attr('class', 'stopEventPanel').attr('width', renderConfig.width).attr('height', renderConfig.height).attr('fill', 'transparent'); 
    } else { // disable zoom and pan 
     rootPanel.select('.stopEventPanel').attr('fill', 'transparent'); 
    } 
} else { // enable zoom and pan 
    d3.select('.rootPanel').select('.stopEventPanel').attr('fill', 'none'); 
}