डी 3 फोर्स लेआउट: ड्रैग (ज़ूम) चिकनी

Question

पर पैन बनाना मुझे एक d3.js स्थिर बल लेआउट ग्राफ मिला है जो कि बड़ा हो सकता है (कभी-कभी इसके हिस्सों को क्लिप किया जाता है), इसलिए मैं उपयोगकर्ता को देना चाहता हूं ड्रैग करके पूरे ग्राफ को पैन करें। मुझे नहीं लगता कि मुझे व्यक्तिगत नोड्स को खींचने की ज़रूरत है, मुझे लगता है कि यह भ्रमित होने वाला है, लेकिन यह ग्राफ के उन हिस्सों को दिखाने के लिए संभव बनाना चाहता है जो एसवीजी सीमाओं से घिरे हुए हैं।

मैं http://bl.ocks.org/3811811, जिस पर एक न्यूनतम उदाहरण मिल गया है

visF.append("rect") 
.attr("class", "background") 
.attr("width", width) 
.attr("height", height) 
.call(d3.behavior.zoom().on("zoom", redrawVisF)); 
function redrawVisF() { 
    visF.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 
} 

का उपयोग करता पैनिंग लागू करने के लिए है, लेकिन मैं यह वास्तव में "skittery" और बहुत चिकनी बिल्कुल नहीं मैं कहाँ अनुमान लगा रहा हूँ लगता है, बात करने के लिए यह लोगों को ड्रैग फ़ंक्शन की कोशिश करने से रोक देगा। क्या किसी को कोई सुराग मिला है कि ऐसा क्यों होता है और/या इसे ठीक करने का विचार क्या है?

Answer 1

समस्या यह है कि d3.behavior.zoom क्लिक किए गए आइटम के कंटेनर तत्व से संबंधित वर्तमान माउस स्थिति पुनर्प्राप्त करता है, और आप कंटेनर तत्व को स्थानांतरित कर रहे हैं! तो सापेक्ष स्थिति लगातार बदल रही है, इसलिए आप जो प्रभावशाली प्रभाव देख रहे हैं।

शायद आप पृष्ठभूमि <rect> को स्थानांतरित करना चाहते हैं ताकि यह <svg> तत्व का प्रत्यक्ष बच्चा हो। यह दो चीजें प्राप्त करता है:

1. स्थिति अब <svg> कंटेनर से संबंधित होगी, जो आगे नहीं बढ़ रही है।
2. वर्तमान में, आप ज़ूम या पैन करते समय <rect> स्थानांतरित कर रहे हैं, इसलिए ज़ूम करने योग्य क्षेत्र बदलता है और व्यूपोर्ट के कुछ हिस्सों ज़ूम करने योग्य नहीं होते हैं। एक ही स्थान पर पृष्ठभूमि <rect> होने से भी इस समस्या को हल किया जाता है।