D3之drag

一.drag中的参数说明

var  drag = d3.hehavior .drag()
              .origin()
              .on()

首先，我们一定要认为这是个生成器，也就是说d3为我们提供了一个这样的拖拽框架，让我们定义一系列拖拽的规则，通过传入不同的值会相应的返回一些值供我们所用。切记：在d3中每一个生成器的属性都不可在其调用时改变。其中， origin代表拖拽的原点（每次拖拽的原点而非第一次** 这个很重要 **）。on代表一个事件，用法见例子。

二、on

可有dragstart、drag、dragend可选。顾名思义，dragstart在拖拽之前发生，drag是拖拽的过程中发生，dragend在拖拽之后发生。

三、例子

var width = 600;
var height = 600;
var svg = d3.select(this.el).append('svg')
            .attr({
                    width:width
                   ,height:height
            })
var drag = d3.behavior.drag()
             .origin(function(){return {x:10,y:10}})
             .on('drag',function(d){
                         d3.select(this)
                           .attr({
                                'x':Math.max(0,Math.min(width-50,d3.event.x))
                                  ,'y':Math.max(0,Math.min(height-50,d3.event.y))
                              })
              })
var rect = svg.append('rect')
              .attr({
                     'width':50
                    ,'height':50
               })
              .style({
                    'cursor':'move'
              })
             .call(drag)

在这个例子中，我只展示了drag的用法，但是在实际用的过程中，大家也许会给多个rect定义drag操作。那么一定要注意origin中一定要写为这样或者不定义（推荐不定义）：

.origin(function(d,i){return d})

为什么要这样，我再啰嗦下，是因为，drag对我们是生成器，每一个d都会在drag中做一些系列处理。如果定义一个固定的值，那么当第一个拖拽之后会影响其他。
但其实在真实开发中，如果设置的了origin会给我们带来麻烦，大家可以修改例子，注意观察。