d3.js zoom 事件

冷色系微风爱丶

d3.js v3 英文文档 https://github.com/d3/d3-3.x-api-reference/blob/master/Zoom-Behavior.md

d3.js v4 中文文档 https://d3js.org.cn/document/d3-zoom/#zoom-transforms

d3.behavior.zoom() 调用d3.js 的zoom 事件

var zoom = d3.behavior.zoom();
selection.call(zoom);

zoom.scaleExtent([extent]) 这个是鼠标缩放的距离 [0.001，10000]

zoom.scaleExtent([0.001, 10000])

zoom.on('zoomstart') zoom 事件执行前只用过鼠标变小手但是有bug 在缩放的时候小手也变。

selection.on(".zoomstart", null);

zoom.on('zoom') 执行zoom 事件

selection.on(".zoom", null);

zoom.on('zoomend') zoom 事件执行后

selection.on(".zoomend", null);

_this.zoom.translate([100, 20]) zoom 事件 translate 默认位置保持zoom事件与要执行zoom 事件元素的位置一致

zoom.translate([100, 20])

_this.zoom.scale([1]) 这个是缩放 scale

zoom.scale([0.5])

要执行zoom 事件的元素 .call(zoom) 调用zoom 事件

selection
.call(zoom)

要执行zoom 事件的元素 .on('dblclick.zoom', null) 禁用双击放大

selection
.call(zoom)
.on("dblclick.zoom", null);

要执行zoom 事件的元素 .on('wheel.zoom', null) 单独将缩放的滚轮事件取消

selection
.call(zoom)
.on("wheel.zoom", null);

_this.zoom = d3.behavior.zoom().scaleExtent([0.001, 10000]).on('zoomstart', () => { // zoom 事件发生前 将变小手加给svg 而不是g g不接受事件d3.select('svg.svgTree').style('cursor', 'pointer')}).on('zoom', function() {_this.inner.attr('transform','translate(' + d3.event.translate + ')' +'scale(' + d3.event.scale + ')')}).on('zoomend', () => { // zoom 事件发生前d3.select('svg.svgTree').style('cursor', 'default')})_this.inner = d3.select('.tree').append('svg')
.attr('class', 'svgTree')
.call(_this.zoom)
.append('g')
.style('cursor', 'pointer')// .attr('transform', 'translate(' + 200 + ', ' + 20 + ')')
// _this.zoom.translate([200, 20])
.attr('transform', 'translate(' + _this.width / 3 + ', ' + _this.height / 8 + '), scale(' + 1 + ')')
_this.zoom.translate([_this.width / 3, _this.height / 8])
_this.zoom.scale([1])

d3.js zoom 事件相关推荐

【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
d3.js一个面积图的案例(包含brush与zoom)
d3.js 一个面积图的案例(包含brush与zoom) 参考链接:http://www.a4z.cn/pui/ant-admin.html#/simple-area-chart const rawD ...
D3.js实现力导向图(Dray和Zoom)
今天遇到个问题就是把json(里面nodes和edges属性)文件通过D3.js展示出来,下午终于弄出来了,写篇博客记录一下. 先展示一下效果图: 放大后是这个效果: 什么是力导向图 D3.js官网: ...
html树图制作,d3.js制作树结构图
一.运行效果说明:使用鼠标滚轮放大缩小,点解节点可以收缩打开子节点,按住鼠标左键拖动可移动整体图形. 二.实现过程 1.编写html和css结构 .node { ursor: pointer; } ...
数据可视化利器D3.js教程 API
汇智网 http://xc.hubwiz.com/course/54fd40cfe564e50d50dcf284 D3.js 入门系列 - 选择元素和绑定数据 https://www.cnblogs. ...
D3.js树图tree 组织机构分布图(基于vue)
@[TOC](D3.js树图tree 组织机构分布图(基于vue)) 背景前段时间接到一个需求,仿照企业查查->企业族谱使用d3画出企业关系树图.这也是本人第一次接触d3.js,总体来说就是 ...
d3.js操作svg
最近有个需求需要用d3来操作svg文件实现svg的缩放及拖拽,同时可以在svg上打点,并对点位进行拖拽,记录下实现过程. d3版本用的是d3.v2.js 具体代码如下: /**svg拖拽和缩放*.sc ...
基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
知识图谱可视化vue.js + d3.js
Github 前端 vue.js + d3.js. 需求上部区域展示所有的概念类别.以及画布内他们的个数展示所有关系类别,以及画布内他们的个数显示所有的概念场景(scenes 字段).关系场景 ...

d3.js zoom 事件

d3.js zoom 事件

d3.js zoom 事件相关推荐

最新文章

热门文章