d3 einfaches lineares Diagramm mit jquery ui Bereich Schieber

Question

Wie man einfaches d3.js Diagramm (zum Beispiel http://bl.ocks.org/2579599) mit jQuery.ui Bereichsschieberegler kombiniert? Mit diesem Schieberegler würde ich die x-Achsenskalierung steuern (Anfang und Ende der Datenreihen). Ich erwarte, dass mein Diagramm große Datenmengen enthält und im Idealfall sollte es ohne Neuzeichnen des gesamten Diagramms gemacht werden.

Answer 1

Wenn es Ihnen nichts ausmacht, die Punkte neu zu zeichnen, können Sie den Anfang und das Ende der X-Achse mit einer Skalierung steuern, indem Sie die Domäne von x in den Callback-Methoden des jQuery-Bereichsschiebereglers ändern.

Um dies schön zu machen, können Sie dies mithilfe eines Übergangs und durch Hinzufügen eines Begrenzungsrechtecks ​​tun. Die Bereichsschieberegler Rückrufe wie folgt aussehen würde:

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

habe ich diese zusammen mit dem Clipping bl.ocks.org/3878029 zu bekommen. Ist das die Skalierung der x-Achse, die Sie sich vorgestellt haben? Es zeichnet den Pfad und die X-Achse neu, aber ich bin mir nicht sicher, wie Sie das Neuzeichnen vermeiden können, wenn Sie sehen, wie Sie es ändern wollen.