d3 simple linear chart with jquery ui range slider

Question

How to combine simple d3.js chart (for example http://bl.ocks.org/2579599) with jQuery.ui range slider? With this slider I'd to control x-axis scale (begging and end of data series). I expect that my chart will contain large data set and ideally it should be done without redrawing the whole chart.

Answer 1

If you do not mind redrawing the points, then controlling the beginning and end of the x-axis with a scale can be achieved by changing the domain of x in the callback methods of the jQuery range slider.

To make this pretty you can do this using a transition and by adding a clipping rectangle. The range slider callbacks would look something like this:

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

I added this together with the clipping to get bl.ocks.org/3878029. Is this the kind of scaling of the x-axis that you imagined? It does redraw the path and the x-axis but I am not sure how you can avoid redrawing that seeing how you want it to change.