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 ...
随机推荐
- idea2020.2.x/2020.3.x最新破解版方法教程无限永久重置插件激活码
idea是一个java开发工件,相信我所有的朋友都用过.本教程教你做到完美,安全,永久.破解 idea2020.2.x和idea2020.3.x的所有版本绝对是100% 激活,支持Windows Ma ...
- STL——容器(Map & multimap)的拷贝构造与赋值
1. Map & multimap 的拷贝构造与赋值 map(const map &mp); //拷贝构造函数 map& operator=(con ...
- ThreadX——IPC应用之信号量
一.应用简介 在RTOS的应用开发中,信号量也是经常使用到的一种用于多任务之间信息同步.资源互斥访问的一种手段,常用于协调多个任务访问同一资源的场景.信号量又分为计数信号量和互斥信号量.计数信号量可以 ...
- 开源抓包工具PowerSniff(支持lua,c语言作为脚本实时分析)
做这个程序的意图是wireshark插件编写复杂(虽然也支持lua),而轻量级的工具如smartsniff,minisniff不支持插件化数据分析,各种工具用下来或多或少不顺手.以前写的外挂也都是手工 ...
- MySQL MHA安装配置
1.环境规划 192.168.12.131 node01 192.168.12.132 node02 192.168.12.133 node03 2.环境准备 一主两从GTID,略. 3.配置关键程序 ...
- Unity 保存游戏,读取游戏,退出游戏
1 using System.Collections; 2 using System.Collections.Generic; 3 using UnityEngine; 4 using System. ...
- 腾讯健康码16亿亮码背后的Elasticsearch系统调优实践【>>戳文章免费体验Elasticsearch服务30天】
[活动]Elasticsearch Service免费体验馆>>Elasticsearch Service新用户特惠狂欢低至4折>>Elasticsearch Service企 ...
- Java中的命名规范。
类:所有单词的首字母大写,如:TestJava. 方法:第1个单词的首字母小写,之后每个单词的首字母大写,如:getInfo(). 属性:第1个单词的首字母小写,之后每个单词的首字母大写,如:stud ...
- Numpy的学习4-array的合并
import numpy as np A = np.array([1, 1, 1]) B = np.array([2, 2, 2]) print(np.vstack((A, B))) # vertic ...
- NET 5 Session、Cookie和Cache的使用
1.Cookie public IConfiguration Configuration { get; } // This method gets called by the runtime. Use ...