我想製作一個時間軸,用戶可以選擇滾動縮放或選擇要縮放的區域。 有第一喜歡的一些例子: https://bl.ocks.org/mbostock/4015254 或者與刷面積放大: https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6
但我無法找到兩者兼具的例子。我怎樣才能做到這一點?或者有沒有我錯過的例子?d3的可拖動和縮放時間軸
回答
這不是最直接的實施。您會注意到,基於筆刷的縮放不依賴於d3.zoom
,而是通過監聽器執行縮放,該監聽器觸發事件以執行縮放軸並相應移動繪圖元素所需的任何操作。
相比較而言,所有基於滾動變焦實例一般依賴於d3.zoom
其利用d3.zoom()
行爲跟蹤,同時搖攝/變焦和是用於更新各種圖表元素單獨負責在圖上執行的所有變換。難點在於2種方法完全不同,如果您通過刷子手動更改圖表視圖,則需要找出一種方法來更新d3.zoom
引用的內部縮放轉換,以便它瞭解通過刷新所做的更改基於畫筆的縮放事件。
這並非易事,因爲d3.zoom
並非設計用於從別處獲取信息,而且執行的轉換的內部記錄不意味着可更新/可變。您可以通過selection.call(zoom.transform, d3.zoomIdentity);
更新轉換,但不幸的是,它還會觸發與實際縮放行爲有關的大量事件,這不是您想要的,因爲您已經使用基於筆刷的縮放處理了所有縮放行爲。一個醜陋的,但有效的解決辦法,我是可以使用重置縮放轉換是突變綁定到d3.zoom
行爲DOM節點的實際.__zoom
領域如下:
// WARNING: Ugly mutation of __zoom property of pan/scroll-zoom rect to
// reset the transform without having to fire events associated with zoom
// d3.select(".zoom").node().__zoom = {k: 1, x: 0, y: 0}; <-- Fails since __zoom contains other hidden objects
scrollZoom.node().__zoom["k"] = 1;
scrollZoom.node().__zoom["x"] = 0;
scrollZoom.node().__zoom["y"] = 0;
因此,例如:如果你需要一個用於矩形縮放的二維刷子,而且基於d3.zoom
的縮放用於平移和鼠標滾動,隨後在任何時候使用二維刷子進行縮放時,都需要將d3.zoom轉換重置爲上述的標識轉換。當由於記錄變換而造成的平移/鼠標滾動操作鏈接基於2D畫筆的縮放操作時,這可以防止平移/滾動響應中的抖動和粗糙抖動,d3.zoom
與顯示的視圖不同步(由於2D畫筆在沒有d3.zoom的知識的情況下改變視圖)。
這裏是別的,重要的是要注意的:
d3.zoom
有一個限制,它目前只支持一個共同的縮放比例爲X和Y軸(Source)。這不幸意味着無法將基於二維刷子的縮放映射到基於d3.zoom
的方法,因爲基於2D刷子的縮放會在X和Y中產生不同的縮放比例。如果您想用最少的問題進行操作,請使用一致的方法,我建議您使用d3.xyzoom進行調查。這是d3.zoom
的一個分支,它實現了對X和Y軸的不同比例的支持。這將使您能夠計算任何2D畫筆選擇的相應X和Y縮放比例和平移值,然後您可以將它們輸入到d3.zoom
中,從而使您可以使用常用方法執行所有縮放(這也會導致最小量代碼重複)。這就是說,如果你只對一維基於筆刷的縮放感興趣,你應該能夠將它映射到d3。縮放方式,以便您不必處理2種不同的路徑,以處理圖表中所有軸和其他圖形元素的視圖和縮放。這裏是一個很好的例子:
https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
我這個職位的長度道歉,如果這是一個有點散漫。我正在努力在幾天內將我的工作放在一塊,我會盡量繞圈回來,併發佈一個鏈接,當我這樣做。我一週前纔開始學習D3,所以我一直在學習。
- 1. d3.js:縮放和拖動失敗
- 2. D3可縮放時間軸,如何獲得實際極值?
- 3. d3.js網格在拖動和縮放時左右移動
- 4. D3在X軸上縮放
- 5. d3.js縮放/拖動散點圖
- 6. D3.js縮放和平移 - Y軸
- 7. d3.js縮放和平移時間軸 - 如何顯示動態時間軸範圍?
- 8. 更好的方法來縮放d3時間軸
- 9. 谷歌圖表 - 時間軸:縮放軸
- 10. 視頻時間軸拖動和點擊
- 11. d3.js v3和可縮放的可縮放樹狀圖示例
- 12. d3版本4拖動和縮放更新
- 13. D3:使用矩形拖動來縮放和平移
- 14. Matplotlib - 固定x軸縮放和自動縮放y軸
- 15. jCanvas - 在縮放時拖放n拖放
- 16. 縮放/重繪d3.js網格線放大/拖動
- 17. d3.js保持可縮放的y軸不低於零
- 18. 將D3標籤拖放到可拖動的圓圈
- 19. jQuery:多個可拖動和可拖放?
- 20. D3在時間軸上滾動
- 21. 如何在可拖動和可拖放之間畫線?
- 22. 用於在時間軸上繪製圖形的Javascript庫(可縮放和可選)
- 23. 拖動和縮放的UIImage(OSX)
- 24. 組合拖放和縮放
- 25. d3.js - 應用y軸縮放比例時的空白對象
- 26. Matplotlib根據手動縮放的x軸縮放y軸
- 27. 在Javascript中繪製可縮放的音頻波形時間軸
- 28. 如何在iOS中創建可縮放的時間軸?
- 29. 在D3中應用縮放平移和軸重新縮放比例
- 30. 如何使縮放器可拖動?
以下我的評論有幫助嗎? – HamsterHuey
不,我無法實現它。但是現在我專注於考試,所以我沒有時間花費超過1天的時間。 –