D3js重置拖动行为的原点 [英] D3js reset the origin of a drag behaviour
本文介绍了D3js重置拖动行为的原点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试重置svg组的拖动行为。我的要求是将组从最后停止的位置移动。以下是我的工作小提琴。可以一些帮助我吗?
I am trying to reset the drag behavior of a svg group. My requirement is to move the group from where it was stopped last. Here is my work fiddle. can some on help me?
<g id="a" transform="translate(0,0)">
<g>
<rect x="10" y="10" width="200" height="200" fill="red"></rect>
<circle r="5" cx="10" cy="105" fill="blue"></circle>
<circle r="5" cx="210" cy="105" fill="blue"></circle>
</g>
<g id="b" class="e" transform="translate(0,0)">
<rect x="20" y="20" width="50" height="50" fill="black"></rect>
<circle r="5" cx="20" cy="45" fill="blue"></circle>
<circle r="5" cx="70" cy="45" fill="blue"></circle>
</g>
<g id="c" class="e" transform="translate(0,0)">
<rect x="90" y="20" width="50" height="50" fill="black"></rect>
<circle r="5" cx="90" cy="45" fill="blue"></circle>
<circle r="5" cx="140" cy="45" fill="blue"></circle>
</g>
</g>
<script>
d3.select('#a').call(d3.behavior.drag().on('drag', function () {
d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')');
// d3.event.stopPropagation();
}));
d3.selectAll('.e')
.call(d3.behavior.drag()
.origin(function () {
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
}
)
.on('dragstart', function () {
d3.event.sourceEvent.stopPropagation();
})
.on('drag', function () {
console.log();
d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')');
}))
.on('dragend', function () {
d3.select(this).call(d3.behavior.drag().origin(function () {
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
}))
})
;
</script>
推荐答案
你必须在SVG中每次拖动之前添加它。
You need an origin function to do this. You have to add this before every drag in your SVG.
.origin(function(){
var t = d3.select(this);
return {x: t.attr(x)+ d3.transform(t.attr(transform))。translate [0],
y:t.attr(y)+ d3.transform transform))。translate [1]};
})
http://jsfiddle.net/jffasna/qocc589y/ =nofollow>小提示
Check the fiddle
这篇关于D3js重置拖动行为的原点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文