Geek Answers Handbook

D3 Complex tree only drag without scaling, jump and scroll

D3 Collapsible Tree

EDIT: Added script: http://jsfiddle.net/tLued3x2/2/

I have this Complex tree, and it dynamically expands when I click on each node. When not. nodes continues to grow in the horizontal direction, then I need to add a drag function using the built-in D3 drag event. I got help from old similar questions, including:

But in the end, after a lot of search and hit tests, 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 + ")");
}

, , , 8-9 , node.

, , node ?

.

!!!

+4
1

, 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){
      // update left and top
        event.target.setAttribute('x', ui.position.left);
        event.target.setAttribute('y', ui.position.top);
     });

div-conatining-svg , . .

+1

More articles:


All Articles