一.drag中的參數(shù)說明
var drag = d3.hehavior .drag()
.origin()
.on()
首先国拇，我們一定要認(rèn)為這是個(gè)生成器莽鸿，也就是說d3為我們提供了一個(gè)這樣的拖拽框架，讓我們定義一系列拖拽的規(guī)則印颤，通過傳入不同的值會(huì)相應(yīng)的返回一些值供我們所用请祖。切記：在d3中每一個(gè)生成器的屬性都不可在其調(diào)用時(shí)改變订歪。其中， origin代表拖拽的原點(diǎn)（每次拖拽的原點(diǎn)而非第一次** 這個(gè)很重要 **）肆捕。on代表一個(gè)事件刷晋，用法見例子。
二慎陵、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)
在這個(gè)例子中，我只展示了drag的用法寇钉，但是在實(shí)際用的過程中矫渔，大家也許會(huì)給多個(gè)rect定義drag操作。那么一定要注意origin中一定要寫為這樣或者不定義（推薦不定義）：
.origin(function(d,i){return d})
為什么要這樣摧莽，我再啰嗦下庙洼，是因?yàn)椋琩rag對(duì)我們是生成器镊辕，每一個(gè)d都會(huì)在drag中做一些系列處理油够。如果定義一個(gè)固定的值，那么當(dāng)?shù)谝粋€(gè)拖拽之后會(huì)影響其他征懈。
但其實(shí)在真實(shí)開發(fā)中石咬，如果設(shè)置的了origin會(huì)給我們帶來麻煩，大家可以修改例子卖哎，注意觀察鬼悠。
