Geek Answers Handbook

D3.js: Understanding Zoom in terms of svg

I studied this block d3.js timeline with magnification . However, I cannot understand how the zoom function is actually implemented. Can someone help me understand?

+6
source share
2 answers

Frankly, no scaling occurs.

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

Internal 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 maximum and minimum filter brushes, the data:

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

Reset domain with max and min brush.

 x1.domain([minExtent, maxExtent]);

Select all rectangles in the upper area that do not have data associated with the brush in the DOM. update it with 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 data is present but the DOM is missing.

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

Delete the entire rectangle outside the brush area or not in the list of filtered elements visItems

  rects.exit().remove();

Similarly for the labels as for the rectangles above.

Hope this clears all your doubts.

+8
source

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

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

This will change the scale as if you had increased this point in time.

+2
source

More articles:


All Articles