d3 graphique linéaire simple avec jquery ui curseur de plage

Si vous n'avez pas l'esprit de redessiner les points, puis de contrôler le début et la fin de l'axe des x avec une échelle peut être atteint en modifiant le domaine de x dans les méthodes de rappel de l'jQuery curseur de plage.

Pour faire cette jolie vous pouvez le faire à l'aide d'une transition et par l'ajout d'un rectangle de découpage.
Le curseur de plage rappels ressemblerait à quelque chose comme ceci:

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

J'ai ajouté cette collaboration avec la saturation pour obtenir bl.ocks.org/3878029. Est-ce le genre de mise à l'échelle de l'axe des x que vous aviez imaginé? Il ne retracent la trajectoire et l'axe des x, mais je ne suis pas sûr de savoir comment vous pouvez éviter de redessiner que de voir la manière dont vous souhaitez modifier.

OriginalL'auteur cyon