D3.js: 从svg的角度理解缩放

Question

我一直在研究这个d3.js代码块Timeline with Zoom，但是我无法弄清楚缩放功能是如何实现的。有人能帮助我理解吗？

- QuikProBroNa

Answer 1

坦白地说，这里没有进行缩放。

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();

与上面矩形的标签相同。

希望这能解决你所有的疑问。

- Cyril Cherian

Answer 2

我不确定，但我认为这只是D3比例尺的一个技巧。

它获取下面的选择（这是从时间0到时间100的100％投影），并将其绘制到从时间50到时间80具有相同宽度的新比例尺中。

这将使比例尺以一种看起来像你在那个时间点放大的方式发生变化。

- Rafael Grillo