d3交互

Posted 2020-12-23 mengff

1. 事件监听

selection.on(‘eventName‘,function(){}) //添加事件监听
selection.on(‘eventName‘,null) //移除事件监听

过渡对象没有监听器，transition.on 会报错

2. 常用事件

2.1 鼠标

click
mouseover
mouseout
mousemove
mousedown
mouseup

2.2 键盘

keydown
keypress
keyup

2.3 触屏

touchstart
touchmove
touchend

3. d3的事件对象

d3.event

常用的属性有：

1. screenX, screenY 以显示器左上角为参照点的坐标
2. clientX, clientY 以浏览器内容区域的左上角为参照点
3. pageX, pageY 以页面的左上角为参照点
4. d3.mouse 获取相对于父容器的坐标

例如：

.on(‘click‘, function(){
     console.log(d3.mouse(this)) //this的当前被单击的元素
})

4. d3的常用行为

4.1 拖曳行为

d3.behavior.drag() 创建拖曳对象
drag.origin() 设定拖曳起点，为设定，则为鼠标当前点
drag.on() 绑定拖曳事件
selection.call(drag) 应用drag对象

var drag = d3.behavior.drag()

drag.origin((d, i) => {
    //设置拖曳起点为圆心坐标
    return {x: d.cx, y: d.cy}
})
.on(‘dragstart‘,function(d){
    console.log(‘drag start‘)
})
.on(‘drag‘,function(d){
    d3.select(this)
       //圆心跟随鼠标移动
      .attr(‘cx‘, d.cx = d3.event.x)
      .attr(‘cy‘, d.cy = d3.event.y)
})
.on(‘dragend‘,function(d){
    console.log(‘drag end‘);
});

4.2 缩放行为

用户通过滚轮触发缩放行为，放大或缩小图形

d3.behavior.zoom() 创建缩放对象
selection.call(zoom) 选择集使用该缩放对象
zoom(selection) 缩放应用到选择集
zoom.translate() 设置或获取缩放平移量，默认为[0,0].
zoom.scale() 设定或获取初始缩放值。默认为1。
zoom.scaleExtent() 设置缩放范围，闭区间 [start, end]
zoom.center() 设置缩放中心，默认为鼠标当前位置
zoom.x() 设定x方向的缩放比例尺
zoom.y() 设定y方向的缩放比例尺
zoom.on() 监听缩放事件，有zoomstart, zoom, zoomend三个

例如：

var x = d3.scale.linear()
          .domain([0,width])
          .range([0,width])

var y = d3.scale.linear()
          .domain([0,height])
          .range([0,height])

var zoom = d3.behavior.zoom()
             .x(x)
             .y(y)
             .scaleExtent([1,10])  //缩放范围最小1倍，最大10倍
             .on(‘zoom‘, function(d){
                 var e = d3.event;
                 //图形跟随滚轮缩放
                 d3.select(this).attr(‘transform‘, "translate("+ e.translate +") scale("+ e.scale +")" )
             })