jquery-ui - 带有jquery ui范围滑块的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 轴，但我不确定如何避免重绘，看看你希望它如何改变。