私はこのd3.jsブロックTimeline with Zoomを調べています。しかし、私はズーム機能が実際にどのように実装されているのか理解できません。誰かが私の理解を助けることができますか?D3.js:svgのズームを理解する
6
A
答えて
2
私は確信していませんが、これはD3スケールでのトリックだと思います。
何が起こるかは、以下の選択(時間0から時間100までの100%の投影)であり、同じ幅の時間50から時間80までの新しい縮尺にプロットされます。
これは、その時間を瞬間的にズームしたように見えるように縮尺を変更します。
8
率直に言えば、ズームの発生はありません。
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又は全ての矩形を削除します。
これはあなたの疑問をすべて解決することを願っています。
関連する問題
- 1. d3スタッキングとズーム
- 2. d3.js:SVGリニアグラデーションの色を変えますか?
- 3. ズームのプロパティをリセットするd3
- 4. D3マウスホイールのズーム動作の制約
- 5. d3.jsを使ったズーム棒グラフ
- 6. d3.js散布図をズーム/ドラッグ
- 7. Javascript D3の可視化クワッドツリーを理解する
- 8. D3米国の州のマップは、ズーム私はD3マップを作成しました
- 9. ズーム時にD3軸のラベルが細かすぎる
- 10. D3.jsがノードにデータをバインドする方法を理解する
- 11. D3.jsでズームまたはパンするときのドメインを制限する
- 12. D3でズーム機能を設定した後にズーム機能を削除する方法は?
- 13. d3:状態の代わりに国の境界ボックスIIにズーム
- 14. D3.JSのツリーマップ一貫性のないズーム動作
- 15. D3の物理的重さ
- 16. d3.event.scaleには、タッチデバイスのズームにNaNが含まれています
- 17. Raphael JS:SVG画像のパスを見つけるには?
- 18. UIWebView内のズームとパンの処理
- 19. iPhoneの解像度を理解する
- 20. D3 - マップ上でのマウスイベント処理
- 21. v2でズームを実装すると、d3.js v3で強制グラフが破損するのはなぜですか?
- 22. Objective-Cの論理を理解する
- 23. Pythonのasyncioを理解/理解するためのリソース
- 24. ズーム後に画像の解像度を維持する方法は?ズームを行った後に
- 25. nvd3.js:svg内のデータポイントでonClickイベントをバインドできません
- 26. コールバックは、私はから来たコードのD3の部分を理解しようとしている謎
- 27. 理解するpython
- 28. バックボーンとマリオネットの理解ライフサイクルの理解
- 29. mapviewをズームする
- 30. d3.jsを使用して太平洋を中心としたメルカトルマップをズームしてパンニングする