在D3中轉換后的數據更新后，更新拖動/滾動原點

Question

我在圖表上進行拖動，縮放和更新。 這在大多數情況下有效，但是，添加新數據后，拖動位置不會更新。

重現步驟：

• 觀看演示
• 等待幾秒鍾，以便將一些數據添加到圖形中
• 然后嘗試將圖表向左或向右拖動
• 該圖將被推回到起點，並且從該點開始拖動以應有的方式進行

所以我想，在添加新數據時，我必須以某種方式更新拖動原點。 但是如何？ 到目前為止，我找不到任何示例。 我還查看了D3拖動功能的代碼 ，但對我來說仍然不清楚。 縮放也會發生同樣的事情，我想那是同樣的問題。

可以在這里查看代碼和演示： http : //jsbin.com/irixag/1/edit

編輯：如果不清楚我的意思，請告訴我，以便我重新表述這個問題。

Answer 1

好的，我一直在仔細檢查您的代碼和d3.js源代碼，並且注意到了幾件事。

首先，我的解決方案的要點是添加

function update() {
    ...
    if (shiftRight) {
        zoom.x(x); // You're missing this line
        ...
    }
    ...
}

原因如下：

您正在使用d3.behavior.zoom()對象上的.x(x)調用來初始化水平拖放。 看起來不錯，除了此拖放處理程序不是為變化的原點設計的。

基本上，當您調用d3.behavior.zoom().x(x)您聲明的是x的值現在是原點。 現在，d3.js會存儲此值，因此即使您在動畫循環中向右移動窗口，拖放操作仍會保留原始原點。

在d3.behavior.zoom源中，有三個感興趣的變量x0 ， x1和translate 。 x1是對當前值的參考x你傳遞的變量， x0是復制的值x在最初傳入的。 translate是所有阻力+滴合並的總翻譯。

現在，方便地調用zoom.x(x)重置所有這三個變量，這意味着轉換將僅針對當前原點進行匯總，並且原點將反映您的移動窗口。