d3.js: सीमा के साथ पैन

Question

मैं पैन कार्यक्षमता के साथ एक मूल रैखिक चार्ट पर काम कर रहा हूं।

मैं हद चार्ट तत्वों d3.event.translate मूल्यों को सीमित करके घसीटा जा सकता है जो करने के लिए सीमित करने के लिए कामयाब रहे:

var tx = Math.max(0, d3.event.translate[0]), 
    ty = Math.min(0, d3.event.translate[1]); 

सभी मैं अब जरूरत है x सीमित करने के लिए है और y तदनुसार अक्ष। उदाहरण देखें: http://jsfiddle.net/Q2SWV/

चार्ट पर बार 0 से नीचे या बाईं ओर खींचते समय सीमित हैं। एक्स और वाई अक्ष नहीं हैं। धुरी समस्या को ठीक करने के तरीके पर कोई विचार?

Answer 1

आप बहुत करीब हैं, लेकिन आप अपने अपडेट किए गए अनुवाद निर्देशांक के साथ zoom व्यवहार को अपडेट करने का अंतिम चरण खो रहे हैं। यह आपकी समस्या को ठीक करेगा क्योंकि दोनों अक्ष zoom का उपयोग करके अपडेट किए गए हैं। tx और ty का निर्धारण करने के बाद निम्नलिखित सही जोड़ें:

zoom.translate([tx, ty]); 

यह आपके कुल्हाड़ियों के लिए सीमा लागू होगी। यहां अद्यतन पहेली देखें: http://jsfiddle.net/mdml/nZD3E/।