d3 zoom 抖动问题事件

最近在使用d3 zoom得时候遇到一个小坑

直接对元素添加 zoom事件会有很大得抖动，查文档看代码之后发现是由于元素在不断变化，所以计算基础值也不不断变化，所以会导致计算出来得值忽大忽小从而造成抖动

解决办法在他父元素上添加事件然后在子元素上添加style 方法

　　具体代码

_addZoomEvent(canvas, container) {

    const _container = d3.select(container);

    const _canvas = d3.select(canvas);

    let isFirstZoom = true;

    // 为了防止抖动 所以把事件添加到父级元素上  防止每次不停计算 而产生抖动

    jsPlumb.setZoom(this._scale);

    _canvas.style('transform', `scale(${this._scale})`);

    _canvas.style('transform-origin', '0 0');

    _container.call(d3

      .zoom()

      .scaleExtent(this._zoomOption.range)

      .on('zoom', e => {

        // 兼容5.xx 版本  新版本去掉了d3.event 使用 e

        e = e || d3.event;

        if (isFirstZoom) {

          e.transform.k = this._scale;

          isFirstZoom = false;

        }

        let { k, x, y } = e.transform;

        _canvas.style('transform', `translate(${x}px, ${y}px) scale(${k})`);

        jsPlumb.setZoom(k);

        _canvas.style('transform-origin', '0 0');

      }));

    this._eventManagement.addCancelHandler(() => {

      _container.on('zoom', null);

    });

  }

顺便在记录一下我们在对dom添加事件得时候要记得销毁事件所以我们对事件做一个整体统一处理具体代码如下

export class EventManagement {

  _eventList = [];

  constructor() {}

  clearEvents() {

    this._eventList.forEach(fn => fn());

  }

  addEvent(target, event, cb, opts) {

    target.addEventListener(

      event,

      e => {

        cb(e);

      },

      opts

    );

    this._eventList.push(() => {

      target.removeEventListener(event, cb);

    });

  }

  addCancelHandler(handler) {

    this._eventList.push(handler);

  }

}

　　使用时创建一个实例出来所有事件有关方法都挂在到实例上最后销毁

_eventManagement = new EventManagement();

this._eventManagement.addEvent(canvas, 'mouseup', e => {

      this._analyzeCanvasMouseup(e);

   });

this._eventManagement.clearEvents();

d3 zoom 抖动问题事件的更多相关文章

d3.js v4曲线图的拖拽功能实现Zoom
zoom缩放案例源码:https://github.com/HK-Kevin/d...:demo:https://hk-kevin.github.io/d3...: 原理:通过zoom事件来重新绘制 ...
d3.js:数据可视化利器之交互行为：响应DOM事件
selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...
d3.js 平移缩放
rt 记录一下 var zoom = d3.zoom() .scaleExtent([0.1,10]) .on("zoom", zoomed); function zoomed() ...
d3.js 地铁轨道交通项目实战
上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们 ...
在vue中使用基于d3为基础的dagre-d3.js搞定一个流程图组件
项目中想搞定一个流程图,开始使用了阿里的G6,但是G6目前不支持手势,这样就很郁闷了,因为公司的领导都是使用iPad看的,你不支持手势是不行的,后来又想到了百度的echarts,试了试,感觉还不错,手 ...
仿Neo4j里的知识图谱，利用d3+vue开发的一个网络拓扑图
项目需要画一个类似知识图谱的节点关系图. 一开始用的是echart画的. 根据https://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb,成功画出简单 ...
wpf 用户自定义事件传参
//自定义传参 ,对外联系的参数 public class ImageZoomChangedEventArgs : RoutedEventArgs { /// <summary> /// ...
d3.js 绘制北京市地铁线路状况图(部分)
地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件 ...
D3.js力导向图中新增节点及新增关系连线示例
大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...
D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决
上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

随机推荐

四种比较简单的图像显著性区域特征提取方法原理及实现-----> AC/HC/LC/FT。
laviewpbt 2014.8.4 编辑 Email:laviewpbt@sina.com QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以 ...
Css 进阶篇
一.Css2 高阶知识(常用) 1. css 优先权优先权(从低到高) 浏览器缺省设置外部样式表内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) 因此, ...
HashTable 简述
1.解释:使用了映射函数,把值映射到对应的位置,key-> address, address是表中的存储位置,不是实际的地址: 2.Hash 函数设计, 分布合理,冲突少,利用率平衡,利用率 ...
V$RECOVERY_PROGRESS
v$recovery_progress视图可以用来监控数据库recovery操作,以及所需时间的估算.此外,可以用来监控physical standby环境的redo应用速度. SQL> sel ...
CORTEX -M3 : Registers in depth
http://www.zembedded.com/cortex-m3-registers-in-depth/ Thanks for the overwhelm response you show in ...
在Linux里读取UBOOT环境变量
转载:http://falloutmx.blog.163.com/blog/static/39236020201211145010154/ 可以通过mtd方式读取,也可以用ioremap方式.不过这些 ...
BZOJ2105: 增强型LCP
2105: 增强型LCP Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 366 Solved: 86[Submit][Status] Descrip ...
jQuery+PHP掷色子抽奖
原文 jQuery+PHP掷色子抽奖本文以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽 ...
java基础笔记（3）----函数
前言引入函数前,所有的代码都写在main主函数中,代码过多,代码冗余,可读性差. 引入函数后,函数是实现某一特定功能的代码块.一个类中可以定义多个函数,每个函数和main主函数都是并列关系. 函数: ...
[转帖]"微信支付"勒索病毒制造者被锁定传播、危害和疫情终极解密 --- 可以学习下一年火绒团队的分析原理的精神.
"微信支付"勒索病毒制造者被锁定传播.危害和疫情终极解密 https://www.cnbeta.com/articles/tech/794851.htm 12月1日,首个要求&q ...

d3 zoom 抖动问题 事件

d3 zoom 抖动问题 事件的更多相关文章

随机推荐

d3 zoom 抖动问题事件

d3 zoom 抖动问题事件的更多相关文章