ज़ूमिंग गुणों को रीसेट करना d3

Question

जब भी मैं किसी ऑब्जेक्ट पर क्लिक करता हूं और इसे छोड़ देता हूं, तो मैं अपने svg की ज़ूम प्रॉपर्टी को रीसेट करने का कोई तरीका ढूंढने का प्रयास कर रहा हूं। उदाहरण के लिए यदि आप ज़ूम आउट करते हैं और स्क्वायर पर क्लिक करते हैं, तो ज़ूम रीसेट हो जाता है लेकिन फिर जब मैं स्क्रीन को पैन करने का प्रयास करता हूं तो ज़ूम वापस वर्ग पर क्लिक करने से पहले क्या होता था। क्या ऐसा कोई तरीका है कि जब मैं एक वर्ग पर क्लिक करता हूं, तो ज़ूम 100% पर वापस जाता है और पैनिंग करते समय भी 100% पर रहता है?

JSFiddle:

svg.call(d3.behavior.zoom().on("zoom", redraw)); 

Answer 1

कुंजी ज़ूम व्यवहार है कि आप पैमाने और अनुवाद को रीसेट कर रहे हैं बताने के लिए है: http://jsfiddle.net/nrabinowitz/p3m8A/

यहाँ मेरी ज़ूम कॉल है। इसे प्राप्त करने के लिए, बस इसे एक चर में सहेजें और मानों को उचित रूप से सेट करें क्योंकि आप transform एसवीजी की विशेषता सेट कर रहे हैं।

var zoom = d3.behavior.zoom(); 
svg.call(zoom.on("zoom", redraw)); 
// ... 
.on("click", function() { 
     counter++; 
     canvas 
      .transition() 
      .duration(1000) 
      .attr('transform', "translate(" + (offset * counter) + ",0)"); 
     zoom.scale(1); 
     zoom.translate([offset * counter, 0]); 
    drawBox(x, y); 
    }); 

अद्यतन jsfiddle here अपडेट किया गया।