डी 3 jquery ui रेंज स्लाइडर

Question

के साथ सरल रैखिक चार्ट jQuery.ui रेंज स्लाइडर के साथ सरल d3.js चार्ट (उदाहरण के लिए http://bl.ocks.org/2579599) को कैसे गठबंधन करें? इस स्लाइडर के साथ मैं एक्स-अक्ष स्केल (डेटा श्रृंखला की भीख मांगना और अंत) को नियंत्रित करना चाहता हूं। मैं उम्मीद करता हूं कि मेरे चार्ट में बड़े डेटा सेट होंगे और आदर्श रूप से इसे पूरे चार्ट को दोबारा किए बिना किया जाना चाहिए।

Answer 1

यदि आपको अंक को फिर से निकालने में कोई फर्क नहीं पड़ता है, तो एक्स-अक्ष की शुरुआत और अंत को स्केल के साथ नियंत्रित करने के लिए jQuery रेंज स्लाइडर के कॉलबैक विधियों में x के डोमेन को बदलकर हासिल किया जा सकता है।

यह सुंदर बनाने के लिए आप इसे एक संक्रमण का उपयोग करके और एक क्लिपिंग आयत जोड़कर कर सकते हैं। सीमा स्लाइडर कॉलबैक कुछ इस तरह दिखेगा:

<div id="slider"> 
    <script> 
    $(function() { 
     $("#slider").slider({ 
     range: true, 
     min: 0, 
     max: data.length-1, 
     values: [0,6], 
     slide: function(event, ui) { 
      var maxv = d3.min([ui.values[1], data.length]); 
      var minv = d3.max([ui.values[0], 0]);; 

      //this is the main bit where the domain of x is readjusted 
      x.domain([minv, maxv-1]); 

      //apply the change in x to the x-axis using a transition 
      graph.transition().duration(750) 
      .select(".x.axis").call(xAxis); 

      //apply the change in x to the path (this would be your svg:path) 
      graph.transition().duration(750) 
      .select(".path").attr("d", line(data)); 
     }}); 
    }); 
    </script> 
</div> 

मैं इस एक साथ कतरन के साथ bl.ocks.org/3878029 प्राप्त करने के लिए जोड़ा गया। क्या यह एक्स-अक्ष की स्केलिंग है जिसे आपने कल्पना की थी? यह पथ और एक्स-अक्ष को फिर से चलाता है लेकिन मुझे यकीन नहीं है कि आप इसे कैसे बदलना चाहते हैं यह देखने के लिए कि आप इसे कैसे बदलना चाहते हैं।