一.drag中的參數(shù)說明

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

首先，我們一定要認為這是個生成器，也就是說d3為我們提供了一個這樣的拖拽框架，讓我們定義一系列拖拽的規(guī)則，通過傳入不同的值會相應的返回一些值供我們所用。切記：在d3中每一個生成器的屬性都不可在其調(diào)用時改變。其中， origin代表拖拽的原點（每次拖拽的原點而非第一次** 這個很重要 **）。on代表一個事件，用法見例子。

二、on

可有dragstart、drag、dragend可選。顧名思義，dragstart在拖拽之前發(fā)生，drag是拖拽的過程中發(fā)生，dragend在拖拽之后發(fā)生。

三、例子

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中做一些系列處理。如果定義一個固定的值，那么當?shù)谝粋€拖拽之后會影響其他。
但其實在真實開發(fā)中，如果設(shè)置的了origin會給我們帶來麻煩，大家可以修改例子，注意觀察。