D3可折叠树只拖动而不缩放和跳转和滚动 [英] D3 Collapsible Tree only drag without zoom and jump and scroll

问题描述

编辑： 添加的小说： http://jsfiddle.net/tLued3x2/ 2 /

我有这个折叠树，它会在每个节点上点击动态扩展。当没有。的节点在水平方向上继续增加，然后我需要使用D3内置的拖动事件添加拖动功能。我从旧的类似问题中获得帮助，包括：

2. D3.js缩放和平移一个可折叠的树图

但是经过大量的搜索和命​​中试验，所需功能使用：

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

那么有什么方法来控制这个拖动，以便有最小的可能跳转和平滑拖动到树的结束节点？

任何帮助

解决方案

div>

这可以使用 jquery-UI draggable行为来完成。

  $（'＃div-containing-svg'）
 .draggable（{axis：x}） 
 .bind（'mousedown'，function（event，ui）{
 $（event.target.parentElement）.append（event.target）; 
}）
 .bind （'drag'，function（event，ui）{
 //更新左侧和顶部
 event.target.setAttribute（'x'，ui.position.left）; 
 event.target .setAttribute（'y'，ui.position.top）; 
}）; 
  

div-conatining-svg的画布大小必须能够在拖动。尺寸也必须控制。

EDIT: Fiddle added : http://jsfiddle.net/tLued3x2/2/

I have this Collapsible tree and it is expanding dynamically on click on each node. When the no. of nodes keeps on increasing in horizontal direction then I need to add the drag functionality using D3 in-built drag event. I took help from old similar questions including:

1. Avoid jumping of an SVG Text with text-anchor while dragging

2. D3.js Zooming and panning a collapsible tree diagram

But at the end after lots of searching and hit-trials I got the required functionality using :

 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 + ")");
}

But with this code also when I try to drag the tree then it jumps from current mouse position to extreme left or right side of the frame and also when the tree is 8-9 nodes deep horizontally, the drag functionality would not be able to take me to the extreme end node.

So is there any way to control this dragging so that there is minimum possible jumping and smooth dragging to the end node of the tree?

Any help would be appreciated.

Thanks!!!

解决方案

This can be done using jquery-UI draggable behaviour.

    $('#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);
     });

Also the canvas size of the div-conatining-svg must be such that it can be seen when dragged.So size must also need to be controlled.

这篇关于D3可折叠树只拖动而不缩放和跳转和滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！