我一直在研究这个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]);
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);});
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();
我不确定,但我认为这只是D3比例尺的一个技巧。
它获取下面的选择(这是从时间0到时间100的100%投影),并将其绘制到从时间50到时间80具有相同宽度的新比例尺中。
这将使比例尺以一种看起来像你在那个时间点放大的方式发生变化。