d3的可穿戴和可縮放的時間軸

Question

我想制作一個時間軸，用戶可以在滾動縮放或選擇要縮放的區域之間進行選擇。 有一些第一個例子： https ： //bl.ocks.org/mbostock/4015254或用刷子放大一個區域： https ： //bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6
但我找不到兼顧兩者的例子。 我怎么能兩個都做？ 還是有任何我錯過的例子？

Answer 1

這不是最直接的實現方式。 正如您將注意到的那樣，基於畫筆的縮放不依賴於d3.zoom ，而是通過觸發事件的偵聽器執行縮放，以執行縮放軸和相應移動繪圖元素所需的任何操作。

相比之下，所有基於滾動的縮放示例通常依賴於d3.zoom ，其利用d3.zoom()行為來跟蹤在平移/縮放時在繪圖上執行的所有變換，並且單獨負責更新各種圖表元素。 困難在於兩種方法完全不同，如果您通過刷塗手動更改圖表視圖，則需要找到一種方法來更新d3.zoom引用的內部縮放變換，以便它了解更改通過基於畫筆的縮放事件制作。

這根本不容易做到，因為d3.zoom並非設計用於從其他地方提供信息，並且所執行的轉換的內部記錄不是可更新/可變的。 您可以通過selection.call(zoom.transform, d3.zoomIdentity);更新轉換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;

例如：如果您想要2D畫筆進行矩形縮放，還d3.zoom基於d3.zoom的縮放進行平移和鼠標滾動，那么只要您使用2D畫筆進行縮放，就可以將d3.zoom變換重置為身份變換如上。 當使用平移/鼠標滾動操作鏈接基於2D畫筆的縮放操作時，這可以防止和消除抖動/滾動響應中的抖動，因為d3.zoom與記錄中的d3.zoom不同步（由於基於2D畫筆的縮放更改視圖，而無需d3.zoom的知識）。

以下是值得注意的重要事項：

d3.zoom的局限性在於它目前僅支持X軸和Y軸的常用縮放比例（ 源 ）。 遺憾的是，這意味着無法將基於2-D畫筆的縮放映射到基於d3.zoom的方法，因為基於2D畫筆的縮放會在X和Y中產生不同的縮放比例。如果您想以最小的問題做事，請使用一致的方法，我建議考慮使用d3.xyzoom 。 這是d3.zoom一個分支，它實現了對X和Y軸的不同比例的支持。 這將使您能夠為任何2D畫筆選擇計算相應的X和Y縮放比例和平移值，然后您可以將其輸入d3.zoom ，從而使您能夠使用通用方法執行所有縮放（這也會導致最少量的代碼重復）。

話雖如此，如果您只對基於1-D畫筆的縮放感興趣，您應該能夠將其映射到d3.zoom方法，這樣您就不必處理2個不同的路徑來處理視圖和縮放圖表中的所有軸和其他圖形元素。 這是一個很好的例子：

https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我為這篇文章的篇幅道歉，如果它有點散漫。 我正在努力在幾天內將我的工作放在一起，我會嘗試回到這里，並在我開始這樣做時發布一個鏈接。 我一周前才開始學習D3，所以我一直在學習。