javascript - 在 D3 js 的可折叠树节点中，单击节点后如何使节点能够拖动？

Question

我想拖动一个节点来重新调整我的可折叠树，因为节点之后的数据长度很大。我怎样才能做到这一点。

我将这段代码写在我的脚本文件中。以下代码用于 force.layout。如何在 tree.layout 中获得相同的结果。

// drag code

var node_drag = d3.behavior.drag()
  .on("dragstart", dragstart)
  .on("drag", dragmove)
  .on("dragend", dragend);

function dragstart(d, i) {
  force.stop() // stops the force auto positioning before you start dragging    }

function dragmove(d, i) {
  d.px += d3.event.dx;
  d.py += d3.event.dy;
  d.x += d3.event.dx;
  d.y += d3.event.dy;
  tick(); // this is the key to make it work together with updating both px,py,x,y on d !
}

function dragend(d, i) {
  d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
  tick();
  force.resume();
}

function dblclick(d) {
  console.log('Double clicked. ');
  d3.select(this).classed("fixed", d.fixed = false);
}

function tick(d) {
  link.attr("x1", function(d) { return d.source.x; })
   .attr("y1", function(d) { return d.source.y; })
   .attr("x2", function(d) { return d.target.x; })
   .attr("y2", function(d) { return d.target.y; });

  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
};

标签： javascriptjqueryd3.js