D3.js:了解svg方面的缩放

Question

我一直在研究这个带有缩放的 d3.js块时间轴.但是,我无法弄清楚缩放功能是如何实际实现的.有人可以帮我理解吗？

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

标签与上面的矩形完全相同.

希望这能清除你所有的疑虑.

Answer 2

我不确定，但我认为这只是 D3 音阶的一个技巧。

发生的情况是，它获得下面的选择（这是从时间 0 到时间 100 的 100% 投影），并以相同的宽度绘制从时间 50 到时间 80 的新比例。

这将使比例发生变化，看起来就像您放大了那个时间点。