D3.js: Understanding Zoom in Bezug auf Svg

Question

Ich habe in diesem d3.js Block Timeline with Zoom untersucht. Ich bin jedoch nicht in der Lage herauszufinden, wie die Zoom-Funktion tatsächlich implementiert ist. Kann mir jemand helfen, das zu verstehen?

Answer 1

Ich bin mir nicht sicher, aber ich denke, das ist nur ein Trick mit D3-Skalen.

Was passiert ist, dass es die Auswahl unten (das ist eine Projektion ein 100% von mit Zeit 0 bis Zeit 100) und Plots in einer neuen Skala von Zeit 50 bis Zeit 80 mit der gleichen Breite.

Dadurch ändert sich die Skalierung so, als ob Sie zu diesem Zeitpunkt gezoomt hätten.

Answer 2

Ehrlich gesagt, es gibt kein Zoom passiert.

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

Innerhalb der Anzeigefunktion.

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

Auf der Basis der maximalen und minimalen der Bürste die Daten filtern:

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

die Domäne neu mit dem Max und Min der Bürste.

x1.domain([minExtent, maxExtent]); 

Auswählen aller Rechtecke in der oberen Fläche der Bürsten assoziierten Daten an die DOM nicht aufweist. es mit dem neuen Skalenwert aktualisiert

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

alle neue Rechtecken erstellen, wenn die Daten vorhanden sind, aber DOM ist nicht vorhanden.

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

Entfernen Sie alle Rechteck outsside der Bürste Umfang oder nicht in der Liste Artikel gefiltert visItems

rects.exit().remove(); 

Genau das gleiche für Etiketten, wie oben für Rechtecke getan.

Hoffe das löscht alle Ihre Zweifel.