d3 prosty wykres liniowy z zakresu jQuery UI suwak

Question

Jak połączyć prosty wykres d3.js (np http://bl.ocks.org/2579599) z jQuery.ui zakres suwaka? Za pomocą tego suwaka sterowałem skalą osi x (żebra i koniec serii danych). Spodziewam się, że mój wykres będzie zawierał duży zestaw danych i najlepiej powinien zostać wykonany bez przerysowywania całego wykresu.

Answer 1

Jeśli nie masz nic przeciwko przerysowaniu punktów, możesz kontrolować początek i koniec osi X za pomocą skali, zmieniając domenę x w metodach wywołania zwrotnego suwaka zakresu jQuery.

Aby to było piękne, możesz to zrobić, używając przejścia i dodając prostokąt przycinający. W zakres callbacks suwak będzie wyglądać mniej więcej tak:

<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> 

dodałem ten wraz z wycinek dostać bl.ocks.org/3878029. Czy to jest rodzaj skalowania osi X, które sobie wymyśliłeś? To przerysowuje ścieżkę i oś X, ale nie jestem pewien, jak można uniknąć przerysowywania tego, widząc, jak chcesz to zmienić.