Jquery ui 带有jquery ui范围滑块的d3简单线性图表

如何将简单的d3.js图表（例如）与jQuery.ui范围滑块结合起来？

---

有了这个滑块，我可以控制x轴的比例（数据系列的行乞和结束）。我希望我的图表将包含大量数据集，理想情况下，不必重新绘制整个图表。

如果您不介意重新绘制点，则可以通过在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>

$（函数（）{
$（“#滑块”）.滑块({
范围：对，
分:0,，
最大值：data.length-1，
值：[0,6]，
幻灯片：功能（事件、用户界面）{
var maxv=d3.min（[ui.values[1]，data.length]）；
var minv=d3.max（[ui.values[0]，0]）；；
//这是重新调整x域的主位
x、 域（[minv，maxv-1]）；
//使用过渡将x中的更改应用于x轴
graph.transition（）持续时间（750）
.选择（“.x.axis”）.调用（xAxis）；
//将x中的更改应用于路径（这将是您的svg:path）
graph.transition（）持续时间（750）
.选择（“.path”）.attr（“d”，行（数据））；
}});
});

---

我把这个和剪辑加在一起得到了。这就是你想象的x轴缩放吗？它确实重新绘制了路径和x轴，但我不确定您如何避免重新绘制，看看您希望它如何变化。

非常感谢，这非常有帮助！：）下面是我的例子：试着比较一下google chrome和Firefox的性能，chrome肯定会赢