51dev.com IT技术开发者社区

51dev.com 技术开发者社区

d3交互

代码星球阅读(41)2020-06-29 收藏0次评论

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 缩放行为

用户通过滚轮触发缩放行为,放大或缩小图形,zoom不仅能缩放对象,还能平移对象,就是说,zoom能同时实现缩放和拖动

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 +")" )
//或者 v4版本??
d3.select(this).attr('transform', e.transform); })

 

以上就是d3交互的全部内容。

上一篇: d3动画