码迷,mamicode.com
首页 > 其他好文 > 详细

d3交互

时间:2020-05-30 13:03:05      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:ons   tran   没有   on()   range   对象   oms   use   strong   

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 +")" )
             })

 

d3交互

标签:ons   tran   没有   on()   range   对象   oms   use   strong   

原文地址:https://www.cnblogs.com/mengff/p/12991735.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!