D3 Collapsible Tree 只拖动不缩放和跳跃和滚动答案

【问题标题】：D3 Collapsible Tree only drag without zoom and jump and scrollD3 Collapsible Tree 只拖动不缩放和跳跃和滚动
【发布时间】：2014-10-14 23:31:20
【问题描述】：

编辑： 添加了小提琴：http://jsfiddle.net/tLued3x2/2/

我有这个可折叠树，它在单击每个节点时动态扩展。当没有。节点的数量在水平方向上不断增加，然后我需要使用 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 个节点时，拖动功能不会能够带我到最极端的节点。

那么有什么方法可以控制这种拖动，从而尽可能减少跳跃和平滑拖动到树的末端节点？

任何帮助将不胜感激。

谢谢！！！

【问题讨论】：

标签： jquery svg d3.js

【解决方案1】：

这可以使用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-svg 的画布大小也必须是拖动时可以看到的。所以大小也必须控制。

【讨论】：