jquery-ui - jqueryui範囲スライダーを使用したd3単純な折れ線グラフ

Question

単純なd3.jsチャート（たとえばhttp://bl.ocks.org/2579599）をjQuery.ui範囲スライダーと組み合わせる方法は？このスライダーを使用して、x軸のスケール（データ系列の開始と終了）を制御します。私のチャートには大きなデータセットが含まれていると思います。理想的には、チャート全体を再描画せずに実行する必要があります。

Answer 1

ポイントを再描画してもかまわない場合は、jQuery範囲スライダーのコールバックメソッドでxのドメインを変更することで、x軸の開始と終了をスケールで制御できます。

これをきれいにするには、トランジションを使用し、クリッピング長方形を追加することでこれを行うことができます。範囲スライダーのコールバックは次のようになります。

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

これをクリッピングと一緒に追加して、bl.ocks.org/3878029を取得しました。これはあなたが想像したx軸のスケーリングのようなものですか？パスとx軸は再描画されますが、どのように変更したいかを確認して再描画を回避する方法がわかりません。