怎么让svg内的元素不被拖出svg的大小范围?

*若价格不公道,可以让提问者在平台追加赏金哦,平台是您利益的保证

已完成
怎么让svg内的元素不被拖出svg的大小范围?-小小千
小小千 2年前发布
悬赏:3.0 元

问题详情:分类:

svg的大小是固定的,内部circle元素可拖动,怎么能让circle拖动时不超出svg的大小范围?
var width = 300, height = 300;
var color = d3.scale.category10();
var radius =16;

var data = d3.range(20).map(function() {
return [ Math.random() * width/2, Math.random() * height/2 ];
});

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var drag = d3.behavior.drag()
.origin(function(d) {return {x : d[0],y : d[1]};})
.on("dragstart", function(){d3.select(this).attr("r",radius*2);})
.on("drag", drag)
.on("dragend",function(){d3.select(this).attr("r",radius);});

var nodes=svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("transform", function(d) {return "translate(" + 100 + "," + 100 + ")";})
.attr("cx",function(d) { return d[0];})
.attr("cy",function(d) { return d[1];})
.attr("r",radius)
.attr("fill", function(d, i) { return color(i);})
.call(drag);

function drag(d) {
d[0] = d3.event.x;
d[1] = d3.event.y;
d3.select(this).attr("cx", d[0]).attr("cy", d[1]);
}
最好能在源码上修改,谢谢!

*若价格不公道,可以让提问者在平台追加赏金哦,平台是您利益的保证。你觉得当前的价格如何呢,奉上您珍贵的一票吧

虚高0人次 适中0人次 偏低0人次

分享海报会更快解决你的问题哦!分享海报

此处可发布评论

评论(2

尅爱的小狗 能力:290

2019-10-10 16:55:59

<img alt="[挤眼]" title="[挤眼]" src="http://jf3q.com/fly/res/layui/images/face/8.gif">
尅爱的小狗 能力:290

2019-10-10 16:53:08

<img alt="[挖鼻]" title="[挖鼻]" src="http://169.254.109.5:8020/fly/res/layui/images/face/5.gif">
点击加载更多
竞答者

暂无人竞答

第一时间了解动态
关注我们
客服QQ 1913284695