Html 放大缩小时如何处理当前数据

当鼠标滚轮滚动时，如何确保图表线的画布可以随鼠标位置放大和缩小

---

在我的图表行画布中，我没有使用chart.js或d3.js或其他库。我希望它可以围绕鼠标位置进行放大和缩小，但值会随着放大和缩小而变化。如何确保鼠标位置的中心点不受坐标系变化的影响。

如果使用CSS

变换

属性

缩放（）

然后您可以设置另一个名为

变换原点的规则。如果在应用
scale（）
之前将其设置在屏幕中央，则页面将正确放大

// performs the change of origin and scales the body element
zoom(scale, mouse) {

    return $('body').css('transformOrigin', getMouse(mouse))
        .css('transform', 'scale('+scale+')');

}

// returns a string of the current center of screen
getMouse() {
    let midX = window.innerWidth / 2;
    let midY = window.innerHeight / 2;
    let x = $('body').css('left').split('p')[0];
    let y = $('body').css('top').split('p')[0];

    return String(midX - x + 'px ') + String(midY - y + 'px');
}

然后，您可以使用
bind（）
方法实现滚动激活：

let scale = 1;
let scrollFactor = -0.1;
$(window).bind('wheel mousewheel', function(e){

    let scroll = e.originalEvent.deltaY;
    let sign = Math.sign(scroll);
    let newScale = Math.round((scale + scrollFactor * sign)*100)/100;

    // you could set an if statement here before calling zoom() to
    // set a lower and higher zoom limit
    zoom(newScale, [e.pageX, e.pageY]);


});

您是否使用
transform:scale（）
进行放大和缩小？我没有使用CSS和transform。我正在做图表线的历史数据，通过改变图表线两点之间的间距，并重新绘制，以获得放大和缩小的结果。我想做一个这样的演示：我几乎完成了我的演示，除了这个-我不知道如何处理当前的数据，可以使它放大和缩小鼠标位置。我只是让它在屏幕左侧放大和缩小。如果你不提供一些详细信息和代码，我们无法帮助你确定！谢谢：）你可以编辑你的问题以提供更多详细信息，我们可以帮助你