d3.js zoom 事件

最新推荐文章于 2023-08-20 17:39:01 发布

转载最新推荐文章于 2023-08-20 17:39:01 发布 · 4.8k 阅读

svg 专栏收录该内容

23 篇文章

订阅专栏

本文分享了d3.js v3英文文档和v4中文文档链接，详细介绍了d3.js的zoom事件相关操作，包括调用zoom事件、事件执行前后的处理，以及设置translate默认位置、缩放scale等，还提及禁用双击放大和取消滚轮缩放事件。

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])