d3 拖曳效果

d3的 svg裡面的元素可以直接綁定拖曳效果

var drag=d3.behavior.drag()
  .on("drag",move);
           

聲明drag，并且綁定drag行為的實作函數。 

var circleg=svg.append("g")
	.attr("class","g"+wordsText)
	.call(drag)
           

在元素上綁定drag，

function move(){
		var dx=d3.event.dx;
		var dy=d3.event.dy;
				
					
		var word=this.className.animVal.slice(1);
					
		clickgroups[word].x=clickgroups[word].x+dx;
		clickgroups[word].y=clickgroups[word].y+dy;
					
		d3.select(this)
		.attr("transform",function(d){
		return "translate("+(clickgroups[word].x)+","+clickgroups[word].y+")";
	})
						
						
				}
           

寫全Move元素，拖曳是讓元素跟着動，這裡面調用了d3.event裡面的資訊，d3.event.x指的是滑鼠的位置，d3.event.dx指的是滑鼠的位移位置。