您的位置：首页 > 其它

d3中元素拖拽drag实例

2016-07-25 14:29 441 查看

参考链接：http://blog.csdn.net/lzhlzz/article/details/42200579

https://github.com/d3/d3-3.x-api-reference/blob/master/Drag-Behavior.md

使用拖拽功能我们可以快速将图标展示成我们需要的样子。

d3.behavior.drag()用来构造一个拖拽行为。如果让元素响应这个行为需要使用call()函数，例如

selection.call(drag)

。

使用drag.on()函数来监听一个事件，函数语法为

drag.on(type [, listener])

type表示时间类型，除了

drag

还有

dragstart

和

dragend

。

drag.origin()定义拖拽的原点，默认原点为鼠标点击的位置，这也会造成元素跳动。指定的原点访问器必须返回一个包含被拖动元素开始坐标
x
和
y
的对象；

下面就是一个拖拽元素的实例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<script src="../d3.v3.js"></script>
</head>

<body>
<script>
var width = "100%",
height = 300;

var circles = [{
cx: 150,
cy: 200,
r: 40
}, {
cx: 250,
cy: 200,
r: 40
}];
//添加画布并设置画布大小
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)

var drag = d3.behavior.drag()
//定义了元素拖拽行为的原点，设置为圆的圆心位置可以避免明显的元素跳动,第一个参考连接中的例子可以看到明显的跳动
.origin(function() {
var t = d3.select(this);
return {
x: t.attr("cx"),
y: t.attr("cy")
};
})
.on("drag", dragmove);

svg.selectAll("circle")
.data(circles)
.enter()
.append("circle")
.attr("cx", function(d, i) {
return d.cx;
})
.attr("cy", function(d, i) {
return d.cy;
})
.attr("r", function(d, i) {
return d.r;
})
.attr("fill", "lime")
.attr("stroke", "white")
//为元素添加拖拽事件
.call(drag);

//定义拖拽行为，此处为重新设置元素圆心位置
function dragmove(d) {
d3.select(this)
.attr("cx", function() {
return d.cx = d3.event.x
})
.attr("cy", d.cy = d3.event.y)
}
</script>
</body>

</html>

演示地址：http://justforuse.cn/d3/d3.drag/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航