D3js重置拖动行为的原点
D3js reset the origin of a drag behaviour
我正在尝试重置svg组的拖动行为。我的要求是把小组从上次停止的地方移开。这是我的工作小提琴。有人能帮我吗?
<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>
您需要一个origin函数来完成此操作。您必须在每次拖动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(t.attr("transform")).translate[1]};
})
检查小提琴
相关文章:
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 删除对HTML元素的拖动
- jQuery UI可排序-多连接列表拖动
- 禁用SVG拖动
- 旋转后拖动对象
- JQuery UI可拖动潜水与滚动棒到鼠标
- jsPlumb-拖动克隆而不进行复制
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 如何使元素在可拖动元素内可单击
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 在d3中拖动一条线
- 使元素在iframe中可拖动
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 拖动后在jquery中动态更改比例的变换原点
- 如何在d3 JavaScript库中设置拖动行为的原点(drag. Origin)
- D3js重置拖动行为的原点
- 在D3中更新带有过渡的数据后更新拖动/滚动原点
- 如何在v4中在d3.js中拖动时设置原点
- 拖动一个Famous曲面,并使其在mouseup上转换回原点
- 如何使对象通过拖动旋转,如何使用sin或cos获得围绕原点的旋转点