Jquery D3可折叠树仅在没有缩放、跳跃和滚动的情况下拖动

编辑：添加小提琴：

我有一棵可折叠的树，它在点击每个节点时动态扩展。当节点数量在水平方向上不断增加时，我需要使用D3内置的拖动事件添加拖动功能。我从类似的老问题中得到了帮助，包括：

但在经过大量搜索和点击测试后，我最终通过以下方式获得了所需的功能：

 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个节点时，拖动功能将无法将我带到最末端节点

那么，是否有任何方法可以控制这种拖动，以使跳跃和平滑拖动到树的结束节点的可能性最小

任何帮助都将不胜感激

---

谢谢

这可以使用

jqueryui

draggable行为来完成

    $('#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 conating svg的画布大小必须确保在拖动时可以看到。因此，还必须控制大小