d3 gráfico lineal simple con control deslizante de rango jquery ui

Question

Cómo combinar un gráfico d3.js simple (por ejemplo http://bl.ocks.org/2579599) con el control deslizante jQuery.ui range? Con este control deslizante, controlaría la escala del eje x (principio y final de la serie de datos). Espero que mi cuadro contenga un gran conjunto de datos e, idealmente, debería hacerse sin volver a dibujar todo el cuadro.

Answer 1

Si no le molesta volver a dibujar los puntos, entonces puede controlar el comienzo y el final del eje x con una escala cambiando el dominio de x en los métodos de devolución de llamada del control deslizante de rango jQuery.

Para hacer esto bonito, puede hacer esto usando una transición y agregando un rectángulo de recorte. Las devoluciones de llamada regulador de rango se vería algo como esto:

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

he añadido esto junto con el recorte para obtener bl.ocks.org/3878029. ¿Es este el tipo de escalado del eje x que imaginaste? Redibuja la ruta y el eje x, pero no estoy seguro de cómo puede evitar volver a dibujar eso viendo cómo quiere que cambie.