【D3.js 学习总结】21、D3交互事件

前20节中，我们讲了各种静态D3图表的制作，好的图表应该是要与用户进行互动的，这节来讲讲D3的交互事件；

d3.event

selection选择器事件监听的写法跟平时我们用的jQuery类似，如：

selection.on(‘click’,function(d,i){

alert(‘ok’);

})

但请注意，点击事件触发的匿名函数参数不是我们常用的e或event，而是绑定在选择器上的数据d和数据的序列号i，这点非常重要。

注册事件

我们只要调用全局对象d3.event，它是DOM事件，并实现了标准事件字段，像时间戳timeStamp和键代码keyCode，以及preventDefault()方法和的stopPropagation()方法。当然你可以使用原生事件的pageX and pageY；

在后面的在线示例中我们是这样使用d3.event的

      mouseenter: function(d,i) {
        var e = d3.event;
        var t = d3.select(this)
        t.attr('fill','#000');
        text1.text('当前圆半径：'+ d.r +'px');
      }

注意：通过直接调用d.r可以取到当前选择器上绑定的半径数据；

给选择的元素重复注册事件监听，新的事件被替换之前注册的事件。为注册多个监听器，可以跟一个可选的命名空间，如“click.foo”和“click.bar”。

注销事件

要删除事件监听器，只需要传递null给listener，如示例中的如下代码：

      click: function(d,i) {
        var t = d3.select(this);
        t.on('click',null).remove();
      }

d3.mouse(container)

通过使用全局方法d3.mouse可以方便的获取到当前事件对象的x/y坐标值，container为原生DOM对象；

d3.behavior.drag

拖动行为，通过监听拖拽事件控制SVG的交互行为，以下代码出自最后面的示例；

  // 创建拖动行为
  var drag = d3.behavior.drag()
    .on("drag", function(d,i) {
      // 监听拖拽事件
      var e = d3.event;
      var t = d3.select(this)
      t.attr({
        cx: e.x,
        cy: e.y
      });
    });
  circle1.call(drag);

d3.behavior.zoom

缩放行为，通过监听缩放事件控制SVG的交互行为，以下代码出自最后面的示例；

  // 创建缩放行为
  var zoom = d3.behavior.zoom()
    .on("zoom", function(){
      // 监听缩放事件
      circle2.attr('transform',"translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    });
   circle2.call(zoom)

查看在线演示