D3.js

Question

में ज़ूमिंग या पैनिंग करते समय डोमेन को सीमित करना मैंने एक साधारण D3.js लाइन चार्ट लागू किया है जिसे ज़ूम और पैन किया जा सकता है। यह स्टीफन बानाश के उत्कृष्ट उदाहरण here पर आधारित है।

एक्स डेटा में मेरे डेटा का डोमेन [0, n] है।

अंतर्निहित ज़ूम व्यवहार (यानी mousewheel घटनाओं का उपयोग करके) इस डोमेन में ज़ूमिंग और पैनिंग को सीमित कैसे कर सकता हूं?

मैं उपयोगकर्ताओं को निचले सिरे पर या 0 को ऊपरी छोर पर पैन करने से रोकना चाहता हूं, उदाहरण के लिए उन्हें एक्स-अक्ष पर नकारात्मक मान कभी नहीं देख पाएंगे, और उसी विंडो में ज़ूमिंग को सीमित करना चाहते हैं ।

जेसन डेविस के आधार पर जो उदाहरण मैंने पाया, वह सीमा ([...], [...], [...]) संस्करण 2.9.1 में काम नहीं कर रहा है। दुर्भाग्यवश, ज़ूम व्यवहार वर्तमान में अन्य सुविधाओं में से एक है जो अन्यथा उत्कृष्ट API दस्तावेज़ों में प्रलेखित नहीं है।

किसी भी पॉइंटर्स का स्वागत है।

पीएस। मैंने उसी प्रश्न को D3.js मेलिंग सूची पर पोस्ट किया है लेकिन मुझे कोई प्रतिक्रिया नहीं मिली: https://groups.google.com/d/topic/d3-js/w6LrHLF2CYc/discussion। क्रॉस-पोस्टिंग के लिए माफ़ी।

Answer 1

आपको केवल डोमेन को रेड्रो पर सीमित करने की आवश्यकता है। निम्न कोड ग्राफ़ को इसके शुरुआती डोमेन से ज़ूम आउट होने से रोक देगा (जैसा कि http://bl.ocks.org/1182434 में उपयोग किया गया है)।

SimpleGraph.prototype.redraw = function() { 
    var self = this; 
    return function() { 

    self.x.domain([Math.max(self.x.domain()[0], self.options.xmin), Math.min(self.x.domain()[1], self.options.xmax)]); 

    self.y.domain([Math.max(self.y.domain()[0], self.options.ymin), Math.min(self.y.domain()[1], self.options.ymax)]); 

    .... 

Answer 2

दुःख की बात है समाधान विधेयक द्वारा पोस्ट की केवल आधा चाल किया: यह वास्तव में पैनिंग को बाधित करता है, यह अगर जूम लागू किया जाता है विकृत करने के लिए ग्राफ कारण बनता है। यह आमतौर पर उचित अनुपात और तैनात ग्राफ पर वापस जाना असंभव है।

निम्न संस्करण में अक्षों के अनुपात को बनाए रखा जाता है, भले ही सीमाओं पर स्क्रॉल हो।

जैसे ही स्केलिंग 100% तक पहुंच जाती है, तराजू के डोमेन अपनी मूल स्थिति में रीसेट हो जाते हैं। यह सही स्थिति की गारंटी देता है, भले ही मध्यवर्ती चरण धुरी के लिए अवैध पैरामीटर लौटाते हैं।

हालांकि सही नहीं है, मुझे आशा है कि यह स्क्रिप्ट किसी को तब तक मदद कर सकती है जब तक कि इस सुविधा को लागू नहीं किया जाता है।

# x and y are the scales 
# xAxis and yAxis are the axes 
# graph is the graph you want attach the zoom to 

x0 = x.copy() 
y0 = y.copy() 

successfulTranslate = [0, 0] 

zoomer = d3.behavior.zoom() 
    .scaleExtent([1,2]) 

onZoom = -> 
    ev = d3.event # contains: .translate[x,y], .scale 
    if ev.scale == 1.0 
    x.domain x0.domain() 
    y.domain y0.domain() 
    successfulTranslate = [0, 0] 
    else 
    xTrans = x0.range().map((xVal) -> (xVal-ev.translate[0])/ev.scale).map(x0.invert) 
    yTrans = y0.range().map((yVal) -> (yVal-ev.translate[1])/ev.scale).map(y0.invert) 
    xTransOk = xTrans[0] >= x0.domain()[0] and xTrans[1] <= x0.domain()[1] 
    yTransOk = yTrans[0] >= y0.domain()[0] and yTrans[1] <= y0.domain()[1] 
    if xTransOk 
     x.domain xTrans 
     successfulTranslate[0] = ev.translate[0] 
    if yTransOk 
     y.domain yTrans 
     successfulTranslate[1] = ev.translate[1] 
    zoomer.translate successfulTranslate 

graph.select('g.x.axis').call(xAxis) 
graph.select('g.y.axis').call(yAxis) 
drawBars() 

zoomer.on('zoom', onZoom) 

# ... 
graph.call(zoomer)