如何将简单的d3.js图表(例如
http://bl.ocks.org/2579599)与jQuery.ui范围滑块组合？
使用此滑块,我将控制x轴刻度(数据序列的结束和结束).我希望我的图表将包含大型数据集,理想情况下应该在不重绘整个图表的情况下完成.
使用此滑块,我将控制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>
我将它与剪辑一起添加到bl.ocks.org/3878029.这是你想象的那种x轴缩放吗？它确实重绘了路径和x轴,但我不确定如何避免重新绘制,看看你希望它如何改变.
