d3 拖曳效果

最新推荐文章于 2024-06-07 09:42:39 发布

artemisrj

最新推荐文章于 2024-06-07 09:42:39 发布

阅读量966

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript d3

本文链接：https://blog.youkuaiyun.com/artemisrj/article/details/45194741

Javascript 同时被 2 个专栏收录

49 篇文章

订阅专栏

11 篇文章

订阅专栏

本文详细介绍了如何使用D3.js在SVG元素中实现拖曳交互功能，包括声明拖曳行为、绑定事件及更新元素位置的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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