d3.js zoom 事件

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 事件 

1. var zoom = d3.behavior.zoom();

2. 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 事件

1. selection

2. .call(zoom)

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

1. selection

2. .call(zoom)

3. .on("dblclick.zoom", null);

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

1. selection

2. .call(zoom)

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