我一直在研究这个d3.js块
Timeline with Zoom.但是,我无法弄清楚缩放功能是如何实际实现的.有人可以帮我理解吗？
解决方法
坦率地说,没有变焦发生.
var brush = d3.svg.brush()
.x(x)
.on("brush",display);//this calls display function on brush event drag.
minExtent = brush.extent()[0],//this give the brush extent min
maxExtent = brush.extent()[1],//this give the brush extent max
基于画笔过滤器的最大值和最小值数据：
visItems = items.filter(function(d) {return d.start < maxExtent && d.end > minExtent;});
使用画笔的最大值和最小值重置域.
x1.domain([minExtent,maxExtent]);
选择上部区域中没有刷子将数据关联到DOM的所有矩形.
使用新的比例值更新它
rects = itemRects.selectAll("rect")
.data(visItems,function(d) { return d.id; })
.attr("x",function(d) {return x1(d.start);})
.attr("width",function(d) {return x1(d.end) - x1(d.start);});
如果数据存在但DOM不存在,则创建任何新的矩形.
rects.enter().append("rect")
.attr("class",function(d) {return "miniItem" + d.lane;})
.attr("x",function(d) {return x1(d.start);})
.attr("y",function(d) {return y1(d.lane) + 10;})
.attr("width",function(d) {return x1(d.end) - x1(d.start);})
.attr("height",function(d) {return .8 * y1(1);});
在过滤的项目列表visItems中删除刷子范围之外的所有矩形
rects.exit().remove();
标签与上面的矩形完全相同.
希望这能清除你所有的疑虑.
