Javascript D3.js如何创建这种缩放行为?
我希望我的图表的X轴在使用鼠标滚轮缩放时表现为这样。 预期行为: 我当前的缩放Javascript D3.js如何创建这种缩放行为?,javascript,d3.js,zooming,Javascript,D3.js,Zooming,我希望我的图表的X轴在使用鼠标滚轮缩放时表现为这样。 预期行为: 我当前的缩放 const zoomExtent = [ [ 0, 0 ], [ innerWidth, innerHeight ] ] const xScale = scaleUtc().domain(minMaxData).range([0, innerWidth]) const handleZoom = ({ transform }) => { transform.rescaleX(xScale) } cons
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默认行为图表
我的问题是:
这不是一个优雅的解决方案,但它奏效了
// 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.
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)
}
如果你有更好的解决方案,请让我知道