D3.js 如何創建這種縮放行為？

Question

我希望我的圖表的 xAxis 在使用鼠標滾輪縮放時表現得像這樣。 預期行為：

我目前的變焦

const zoomExtent = [ [ 0, 0 ], [ innerWidth, innerHeight ] ]
const xScale = scaleUtc().domain(minMaxData).range([0, innerWidth])

const handleZoom  = ({ transform }) => {
  transform.rescaleX(xScale)
}

const zoomBehavior = zoom().scaleExtent([ 0.4, 4 ]).extent(zoomExtent).translateExtent(zoomExtent).on('zoom', handleZoom)

這是我的 d3 默認行為圖表

我的問題：

1. 如何始終將縮放集中在右邊緣（圖表上的最新數據）而不是鼠標當前所在的位置？
2. 如何防止 x 軸向右擴展導致我的最新數據（在右邊緣）離開視口？

Answer 1

這不是一個優雅的解決方案，但它確實有效。

// check if wheeled
const isWheeled = sourceEvent.type === 'wheel'

// i need it to be infinite because i lazy load the older data.
// there is no middle infinity.
const zoomExtent = [ [ Infinity, 0 ], [ innerWidth, innerHeight ] ]

// fix focal point at the innerwidth. using previous transform
const tx = innerWidth - transform.invertX(innerWidth) * k
const myZoom = zoomIdentity.translate(isWheeled ? tx : x, 0).scale(k)

// prevent jumping when dragging
sourceEvent.target.__zoom = myZoom

// update scale
const handleZoom  = ({ transform }) => {
  myZoom.rescaleX(xScale)
}

如果您有更好的解決方案，請告訴我。