D3.js: Understanding Zoom in terms of svg

Question

I have been looking into this d3.js block Timeline with Zoom. However, I am not able to figure out how the zoom function is actually implemented. Could somebody help me understand?

Answer 1

Frankly, there is no zoom happening.

var brush = d3.svg.brush()
                    .x(x)
                    .on("brush", display);//this calls display function on brush event drag.

Inside display function.

        minExtent = brush.extent()[0],//this give the brush extent min
        maxExtent = brush.extent()[1],//this give the brush extent max

Based on the max and min of the brush filter the data:

visItems = items.filter(function(d) {return d.start < maxExtent && d.end > minExtent;});

Reset the domain with the brush's max and min.

x1.domain([minExtent, maxExtent]);

Select all rectangles in the upper area not having the brush associate data to the DOM. update it with the new scale values

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

create any new rectangles if the data is present but DOM is not present.

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

Remove all the rectangle outsside the brush extent or not in the filtered item list visItems

    rects.exit().remove();

Exactly the same for labels as done for rectangles above.

Hope this clears all your doubts.