D3.js：svgのズームを理解する

Question

私はこのd3.jsブロックTimeline with Zoomを調べています。しかし、私はズーム機能が実際にどのように実装されているのか理解できません。誰かが私の理解を助けることができますか？

Answer 1

私は確信していませんが、これはD3スケールでのトリックだと思います。

何が起こるかは、以下の選択（時間0から時間100までの100％の投影）であり、同じ幅の時間50から時間80までの新しい縮尺にプロットされます。

これは、その時間を瞬間的にズームしたように見えるように縮尺を変更します。

Answer 2

率直に言えば、ズームの発生はありません。

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

内側の表示機能。

ブラシフィルタの最大値と最小値のデータに基づいて

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

：

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

ブラシの最大と最小でドメインをリセットします。

x1.domain([minExtent, maxExtent]); 

DOMにブラシ関連データがない上部領域のすべての矩形を選択します。新しいスケールが

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

値と はそれを更新したデータは存在していますが、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);}); 

上記長方形のために行われるようにラベルの全く同じvisItems

rects.exit().remove(); 

濾過アイテムリストにブラシ程度outsside又は全ての矩形を削除します。

これはあなたの疑問をすべて解決することを願っています。