CODEWITHSUNDEEP
javascriptd3.jssvgzooming
QuikProBroNa
QuikProBroNa

Reputation: 816

D3.js: Understanding Zoom in terms of svg

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?

Upvotes: 6

Views: 277

Answers (2)

Cyril Cherian
Cyril Cherian

Reputation: 32327

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.

Upvotes: 8

Rafael Grillo
Rafael Grillo

Reputation: 232

I'm not sure but I think this is just a trick with D3 scales.

What happens is that it gets the selection below (which is a projection a 100% of with from time 0 to time 100) and plots into a new scale from time 50 to time 80 with the same width.

This will make the scale change in a way that looks like you zoomed on that time moment in time.

Upvotes: 2

Related Questions