最近在使用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 抖动问题 事件的更多相关文章

  1. d3.js v4曲线图的拖拽功能实现Zoom

    zoom缩放案例 源码:https://github.com/HK-Kevin/d...:demo:https://hk-kevin.github.io/d3...: 原理:通过zoom事件来重新绘制 ...

  2. d3.js:数据可视化利器之 交互行为:响应DOM事件

    selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...

  3. d3.js 平移缩放

    rt 记录一下 var zoom = d3.zoom() .scaleExtent([0.1,10]) .on("zoom", zoomed); function zoomed() ...

  4. d3.js 地铁轨道交通项目实战

    上一章说了如何制作一个线路图,当然上一章是手写的JSON数据,当然手写的json数据有非常多的好处,例如可以应对客户的各种BT需求,但是大多数情况下我们都是使用地铁公司现成的JSON文件,话不多说我们 ...

  5. 在vue中使用基于d3为基础的dagre-d3.js搞定一个流程图组件

    项目中想搞定一个流程图,开始使用了阿里的G6,但是G6目前不支持手势,这样就很郁闷了,因为公司的领导都是使用iPad看的,你不支持手势是不行的,后来又想到了百度的echarts,试了试,感觉还不错,手 ...

  6. 仿Neo4j里的知识图谱,利用d3+vue开发的一个网络拓扑图

    项目需要画一个类似知识图谱的节点关系图. 一开始用的是echart画的. 根据https://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb,成功画出简单 ...

  7. wpf 用户自定义事件传参

    //自定义传参 ,对外联系的参数 public class ImageZoomChangedEventArgs : RoutedEventArgs { /// <summary> /// ...

  8. d3.js 绘制北京市地铁线路状况图(部分)

    地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件 ...

  9. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  10. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

随机推荐

  1. 四种比较简单的图像显著性区域特征提取方法原理及实现-----&gt; AC/HC/LC/FT。

    laviewpbt  2014.8.4 编辑 Email:laviewpbt@sina.com   QQ:33184777 最近闲来蛋痛,看了一些显著性检测的文章,只是简单的看看,并没有深入的研究,以 ...

  2. Css 进阶篇

    一.Css2 高阶知识(常用) 1. css 优先权 优先权(从低到高) 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) 因此, ...

  3. HashTable 简述

    1.解释:使用了映射函数,把值映射到对应的位置,key-> address, address是表中的存储位置,不是实际的地址:   2.Hash 函数设计, 分布合理,冲突少,利用率平衡,利用率 ...

  4. V$RECOVERY_PROGRESS

    v$recovery_progress视图可以用来监控数据库recovery操作,以及所需时间的估算.此外,可以用来监控physical standby环境的redo应用速度. SQL> sel ...

  5. CORTEX -M3 : Registers in depth

    http://www.zembedded.com/cortex-m3-registers-in-depth/ Thanks for the overwhelm response you show in ...

  6. 在Linux里读取UBOOT环境变量

    转载:http://falloutmx.blog.163.com/blog/static/39236020201211145010154/ 可以通过mtd方式读取,也可以用ioremap方式.不过这些 ...

  7. BZOJ2105: 增强型LCP

    2105: 增强型LCP Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 366  Solved: 86[Submit][Status] Descrip ...

  8. jQuery+PHP掷色子抽奖

    原文 jQuery+PHP掷色子抽奖 本文以大富翁游戏为背景,综合运用jQuery和PHP知识,设计出以掷色子点数来达成抽奖的效果,当然抽奖概率是可控的,开发者可以将本实例稍作修改即可运用到网站中的抽 ...

  9. java基础笔记(3)----函数

    前言引入函数前,所有的代码都写在main主函数中,代码过多,代码冗余,可读性差. 引入函数后,函数是实现某一特定功能的代码块.一个类中可以定义多个函数,每个函数和main主函数都是并列关系. 函数: ...

  10. [转帖]&quot;微信支付&quot;勒索病毒制造者被锁定 传播、危害和疫情终极解密 --- 可以学习下一年火绒团队的分析原理的精神.

    "微信支付"勒索病毒制造者被锁定 传播.危害和疫情终极解密 https://www.cnbeta.com/articles/tech/794851.htm 12月1日,首个要求&q ...