javascript – D3.js：了解svg方面的缩放

JavaScript 2019-05-06

我一直在研究这个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中删除刷子范围之外的所有矩形