D3可折叠树仅拖动，不缩放、跳转和滚动
D3可折叠树仅拖动，不缩放、跳转和滚动
提问于 2014-08-21 10:54:17
编辑： Fiddle添加: http://jsfiddle.net/tLued3x2/2/
我有这个可折叠的树，它在每个节点上动态扩展。当不。的节点在水平方向上不断增加，然后我需要添加使用D3内置拖动事件的拖动功能。我从类似的老问题中得到了帮助，包括：
- Avoid jumping of an SVG Text with text-anchor while dragging
- D3.js Zooming and panning a collapsible tree diagram
但在经过大量搜索和命中试验之后，我获得了所需的功能，使用：
d3.select("svg")
.call(d3.behavior.drag()
.origin(function() {
var t = d3.transform(d3.select(this).attr("transform"));
return {x: t.translate[0], y: t.translate[1]}})
.on("drag", dragmove));
function dragmove() {
var x = d3.event.x;
var y = d3.event.y;
d3.select("svg g").attr("transform", "translate(" + x + "," + y + ")");
}但是使用这段代码时，当我试图拖动树时，它会从当前鼠标位置跳转到帧的最左侧或右侧，当树水平深度为8-9节点时，拖动功能将无法将我带到极限节点。
那么，是否有任何方法来控制这种拖放，以便尽可能少地跳转和平滑地拖动到树的末端节点？
任何帮助都将不胜感激。
谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-27 11:37:41
这可以使用jquery-UI可拖动的行为来完成。
$('#div-containing-svg')
.draggable({axis: "x"})
.bind('mousedown', function(event, ui){
$(event.target.parentElement).append( event.target );
})
.bind('drag', function(event, ui){
// update left and top
event.target.setAttribute('x', ui.position.left);
event.target.setAttribute('y', ui.position.top);
});另外，div-conatining的画布大小必须是可以看到的，而dragged.So大小也必须需要控制。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25424524
复制相关文章
相似问题
腾讯云开发者
