D3.js: Capire lo zoom in termini di svg

Question

Ho esaminato questo blocco d3.js Timeline with Zoom. Tuttavia, non sono in grado di capire come viene effettivamente implementata la funzione di zoom. Qualcuno potrebbe aiutarmi a capire?

Answer 1

Non sono sicuro, ma penso che questo sia solo un trucco con le bilance D3.

Quello che succede è che ottiene la selezione seguente (che è una proiezione al 100% di con dal tempo 0 al tempo 100) e traccia in una nuova scala dal tempo 50 al tempo 80 con la stessa larghezza.

In questo modo la scala cambierà in un modo che sembra ingrandito in quel momento nel tempo.

Answer 2

Francamente, non si verifica alcuno zoom.

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

Funzione di visualizzazione interna.

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

In base alla max e min del pennello filtrare i dati:

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

Ripristinare il dominio con max e min del pennello.

x1.domain([minExtent, maxExtent]); 

Selezionare tutti i rettangoli nell'area superiore che non hanno i dati associati al pennello nel DOM. aggiornarlo con la nuova scala valori

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

creare nuovi rettangoli se il dato è presente, ma non è presente 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);}); 

Rimuovi tutti rettangolo outsside nella misura pennello o no nell'elenco degli elementi filtrati visItems

rects.exit().remove(); 

esattamente lo stesso per etichette come fatto per i rettangoli sopra.

Spero che questo chiarisca tutti i tuoi dubbi.