पैन/ज़ूम ऑर्डिनल स्केल?

Question

मैं d3.behavior.zoom का उपयोग करके पैनिंग और ज़ूमिंग के साथ एक सरलीकृत गैंट चार्ट प्रस्तुत करने के लिए d3 का उपयोग कर रहा हूं।

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

ज़ूम/पैन घटनाओं पर प्रतिक्रिया करने के लिए डिफ़ॉल्ट ordinal पैमाने को बताने का कोई तरीका है, या क्या मुझे एक कस्टम स्केल लिखना चाहिए? और यदि मुझे कस्टम स्केल लिखना है, तो इसे d3.scale.ordinal पर बेस करना बेहतर होगा (यह कार्यों की पूरी सूची संग्रहीत करता है, और केवल इसके दृश्य के रूप में दृश्यमान सबसेट का उपयोग करता है), या d3.scale पर। रैखिक (और फिर रेंजबैंड इत्यादि के लिए क्रमिक पैमाने के समान कुछ लागू करें?)।

या क्या मुझे कुछ याद आ रहा है (पूरी तरह से संभव है क्योंकि यह डी 3 का उपयोग कर मेरा पहला प्रोजेक्ट है)?

Answer 1

मेरे पिछले उत्तर से थोड़ा विस्तार करना क्योंकि मुझसे निजी रूप से संपर्क किया गया है समझाओ कि मैंने यह कैसे किया।

सबसे पहले, प्रश्न में ऐप का एक स्क्रीनशॉट, जो नौकरी प्राप्त कर रहा है, विभिन्न स्रोतों (पावरपॉइंट फाइलें, कॉर्पोरेट डेटाबेस इत्यादि) से एकत्रित योजना डेटा एकत्र कर रहा है और प्रदर्शित कर रहा है।

प्रासंगिक सा रंगीन बिंदियाँ, जहां प्रत्येक डॉट एक परियोजना के प्रयास और शामिल संगठन का प्रतिनिधित्व के साथ सही ऊर्ध्वाधर अक्ष है। धुरी पर भूरा क्षेत्र एक d3.js ब्रश है, और वास्तविक समय में चार्ट/तालिका डेटा को बदलने के लिए इसे नियंत्रित/आकार दिया जा सकता है।

• ब्रश हद तक मिलता
• टुकड़ा अपने डेटा सरणी अपने डेटा सरणी में अनुक्रमित करने के लिए इसे स्थानांतरित और के रूप में परिणाम सेट:

  // the axis is a regular ordinal axis, with a brush 
  y2 = d3.scale.ordinal(), 
  brush = d3.svg.brush().y(y2).on('brush', brushReact), 
  // [...] 
  // brush event handler 
  function brushReact() { 
      if (tasksSlice == null) 
       return; 
      var yrb = y2.rangeBand(), 
       extent = brush.extent(), 
       s0 = Math.round(extent[0]/yrb), 
       s1 = Math.round(extent[1]/yrb); 
      if (s0 == tasksSlice[0] && s1 == tasksSlice[1]) 
       return; 
      tasksSlice = [s0, s1]; 
      inner.refresh(); 
  } 
  

  क्या हैंडलर के अंदर होता है बहुत सरल है डेटा प्रदर्शित करने के लिए

• चार्ट और तालिका रीफ्रेश करें

मुझे आशा है कि यह इसे साफ़ कर देगा।

Answer 2

बाहर बदल जाता है यह है कि मुश्किल नहीं है, मैं था:

• , एक कस्टम पैमाने लिखते हैं, ज्यादातर d3.scale.ordinal के समान सिवाय इसके कि यह डोमेन मूल्यों की पूरी रेंज संग्रहीत करता है और एक टुकड़ा लागू करता है ([मिनट, अधिकतम]) विधि जो दृश्य डोमेन मानों की श्रेणी सेट करता है
• ज़ूम ईवेंट कॉलबैक में वाई अनुवाद डेल्टा ट्रैक करें, और इसे एक वेरिएबल में जोड़ें जो कुल वाई अनुवाद
• स्टोर करता है या नहीं, कुल अनुवाद राशि है या नहीं > = दो रेंज मानों के बीच वाई डेल्टा की तुलना में, यदि यह जांच है कि हम पहले से ही (दृश्यमान या दृश्यमान) डोमेन में से एक पर नहीं हैं सीमाएं (0 या लंबाई), और यदि हम 1 से स्लाइस इंडेक्स में वृद्धि या कमी नहीं कर रहे हैं, तो कुल अनुवाद चर को रीसेट करें, फिर अक्ष