天天看点

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指的是鼠标的位移位置。

继续阅读