मैं अपने डी 3 मानचित्र को किसी स्थान पर ज़ूम करने के लिए कैसे प्राप्त करूं?

Question

मैं डी 3 के साथ काम कर रहा हूं और अब तक मैं केवल एक विशिष्ट राज्य को आकर्षित करने के लिए क्लोरोप्लेथ उदाहरण को ट्विक करने में सक्षम हूं। इसमें बस अन्य सभी बहुभुज डेटा को शामिल करना शामिल था ताकि मुझे जिस राज्य की आवश्यकता हो, उसे छोड़ दिया जाए।

मैं इस के साथ शुरू किया:

और फिर बदलाव यह करने के लिए बातें:

हालांकि, मैं क्या करना चाहते हैं ऑटो पैन करने के लिए है/ज़ूम निर्माण पर इतना है कि राज्य डिस्प्ले पर सामने और केंद्र है, इस तरह:

क्या मैं इसे डी 3 लाइब्रेरी के माध्यम से करता हूं? या कुछ स्वतंत्र कोड (मुझे वर्तमान में ऐसा करने के लिए मैन्युअल पैनिंग/ज़ूमिंग के लिए अनुमति देने के लिए jquery-svgpan d3 के साथ चल रहा है)?

Answer 1

यह पाया गया है कि यह दृष्टिकोण प्राप्त करने का सबसे आसान तरीका है, राज्य के बाउंडिंग बॉक्स के आधार पर राज्यों (#states उदाहरण में) g तत्व पर एक परिवर्तन सेट करना है, जो आप ज़ूम कर रहे हैं:

// your starting size 
var baseWidth = 600; 

d3.selectAll('#states path') 
    .on('click', function(d) { 
     // getBBox() is a native SVG element method 
     var bbox = this.getBBox(), 
      centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2], 
      zoomScaleFactor = baseWidth/bbox.width, 
      zoomX = -centroid[0], 
      zoomY = -centroid[1]; 

     // set a transform on the parent group element 
     d3.select('#states') 
      .attr("transform", "scale(" + scaleFactor + ")" + 
       "translate(" + zoomX + "," + zoomY + ")"); 
    }); 

वहाँ एक बहुत अधिक आप यहाँ यह साफ करने के लिए कर सकते हैं - अंतिम ज़ूम करने के लिए कुछ मार्जिन देते हैं, कि आपके ऊपर, चौड़ाई या ऊंचाई पर ज़ूम का आधार चाहिए ज़ूम पर निर्भर करता है स्ट्रोक की चौड़ाई बदलने के लिए, चेतन संक्रमण, आदि - लेकिन यह मूल अवधारणा है।