मैं डी 3 में प्रारंभिक ज़ूम स्तर कैसे निर्दिष्ट करूं?

Question

मैंने पंक्तियों के बीच बार, लेबल और कनेक्शन के साथ ग्राफिक रूप से कुछ पंक्ति-उन्मुख डेटा प्रदर्शित करने के लिए एक स्क्रिप्ट लिखी है। चूंकि डेटासेट बढ़ गया है, परिणामी एसवीजी तत्व स्क्रीन के आकार से अधिक हो गया है। परिणाम को एक स्क्रीन पर रखने के लिए (आंशिक रूप से उपयोगकर्ता को प्रबंधित करने के लिए डी 3 ज़ूम व्यवहार को आसान बनाने के लिए), मैंने ड्राइंग से पहले एसवीजी तत्व को स्केल कर दिया है ताकि यह स्क्रीन पर फिट हो सके। मैंने एसवीजी तत्व में एक ट्रांसफॉर्म/स्केल विशेषता को जोड़कर ऐसा किया।

समस्या यह है कि, d3 का व्यवहार। ज़ूम पैमाने पर इस परिवर्तन के बारे में नहीं जानता है, इसलिए जब मैं ज़ूम करना शुरू करता हूं, तो यह पहले स्केल को रीसेट करता है। क्या डी 3 के व्यवहार में प्रारंभिक पैमाने को बदलने का कोई तरीका है। ज़ूम ?

---

संपादित करें: जोड़ा एक काम के आसपास

kludged इस redraw() फ़ंक्शन में प्रारंभिक पैमाने द्वारा d3.event.scale गुणा करके। तो, एसवीजी तत्व की प्रारंभिक घोषणा

var SVG = d3.select('#timeline') 
    .append('svg:svg') 
     .attr('class','chart') 
     .attr('transform','scale('+bscale+')') 
     .attr('width', wwidth) 
     .attr('height', wheight) 
     .call(d3.behavior.zoom() 
      .extent([[0,Infinity],[0,Infinity],[0,Infinity]]) 
      .on('zoom', redraw)); 

और

function redraw() { 
    SVG.attr("transform", 
     "translate(" + d3.event.translate + ")" 
     + "scale(" + d3.event.scale * bscale + ")"); 
}; 

Answer 1

डी 3 2.8.0 के रूप में है, नए d3.behavior.zoom आप वर्तमान पैमाने पर सेट करने के लिए, उदाहरण के लिए अनुमति देता है

d3.behavior.zoom() 
    .scale(currentScale); 

Answer 2

ज़ूम मान सेट करने के बाद, आपको स्क्रीन पर परिवर्तन करने के लिए ज़ूम ईवेंट को कॉल करना होगा। Here's how you do it:

//set the min and max extent to which zooming can occur and define a mouse zoom function 
var zoom = d3.behavior.zoom().scaleExtent([0.3, 3]).on("zoom", zoomed); 
zoom.translate([50,50]).scale(2);//translate and scale to whatever value you wish 
zoom.event(yourSVGlayer.transition().duration(50));//does a zoom 
//this function handles the zoom behaviour when you zoom with the mouse 
function zoomed() { yourSVGlayer.attr("transform", "translate("+d3.event.translate+")scale(" + d3.event.scale + ")"); } 

Answer 3

d3 v4 में, आप उपयोग कर सकते हैं:

svg.call (zoom.transform, d3.zoomIdentity.scale (X_SCALE, Y_SCALE));

सरल उदाहरण:

var zoom = d3.zoom() 
     .on("zoom", zoomed); 

var zoomer = svg.append("rect") 
     .call(zoom) 
     .call(zoom.transform, d3.zoomIdentity.scale(2,2)); 

function zoomed() { 
     svg.attr("transform", d3.event.transform); 
    } 

आशा है कि मदद करता है।