zoom的0.75缩放后echart.js移入点击事件不准

一个人家写过的项目,项目需求调用图表库echarts.js, 发现老是移入点击位置都不准

还在外面他就触发事件 , 经过我的排查终于发现上一个人,写了一句

这个zoom导致 获取canvas位置不正确, 当时只有两种想法 1,我要不要把他所有css重写(工作量太大)o(╥﹏╥)o  2, 去源码找到位置修改

找到源码 echarts.js 里面的  echartsProto._initEvents  发现echarts.js 调用的 zrender.js 的东东

 

在这里面修改发现也不行只能在 zrender.js 里面找了

 

zrender.js 里面找到echart.js 调用方法  发现他在  handle.js里面

 

终于在 handle.js 里面找到他调用的event.zrX和ecent.zrY

所有事件一起修改 就好了 

转载于:https://www.cnblogs.com/huhaoq/p/10728466.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
D3.js是一个强大的JavaScript库,用于数据可视化,其中的zoom缩放和拖拽功能允许用户交互式地探索复杂的数据集。在D3的`d3.zoom()`函数中,你可以创建一个缩放行为,它可以应用于SVG、Canvas或任何支持CSS变换的元素上。 以下是D3 zoom缩放拖拽的基本实现步骤: 1. **创建Zoom行为**: ```javascript const zoom = d3.zoom() .scaleExtent([1, 10]) // 设置缩放范围 .on("zoom", zoomed); // 触发事件处理函数(zoomed) svg.append("g") .call(zoom); // 将zoom行为应用到SVG元素的子元素上 ``` 2. **定义zoomed函数**: 这个函数会在每次缩放事件后被调用,更新视图的位置和比例: ```javascript function zoomed() { svg.select(".zoom-gROUP") .attr("transform", d3.event.transform); // 更新元素的transform属性 } ``` 3. **拖拽处理**: D3没有内置的拖拽功能,但你可以结合`d3.behavior.drag()`来添加拖拽。首先,创建一个可拖拽的元素,然后定义`dragged`函数来处理拖动事件: ```javascript const drag = d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); element.call(drag); ``` 4. **处理开始、移动和结束事件**: ```javascript function dragstarted(d) { // 在开始拖动时设置初始位置 d3.event.sourceEvent.stopPropagation(); // 阻止默认的鼠标事件 } function dragged(d) { // 根据拖动更新元素位置 } function dragended(d) { // 拖动结束后可能需要更新状态或数据 } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值