在 d3 强制定向布局中拖动多个节点

Question

Precondition : d3 force directed layout; some nodes are selected by sequential clicking one by one (visually they become bigger and in the code pushed to array)

Is there a way to drag them all by picking one with the mouse the same way as files in the Windows explorer?

PS I'm getting very much answers here on stackoverflow without asking for a long time. This is my first question. Thanks in advance for any help!

Answer 1

The way that I impemented the dragging of multiple nodes (based off of children) was by recording the displacement of the dragged node inside of my tick function with a variable whose scope allows the value to still exist the next time tick runs.

You will need an object where the key is a unique indentifier of the node being dragged and the value is a d3 selection of the nodes that you would like to translate/drag when the key node is dragged.

dragObject is the above-mentioned object.

nodeData is the d3 data of the principle node that you are dragging - ( d3.select(node uid).datum() ).

offset.x and offset.y make up the above-mentioned variable that was defined the last time tick was run.

var translateAllChildren = function (nodeData) {
    if (dragObject[nodeData.uid]) {
        dragObject[nodeData.uid]
            .attr("transform", function(d) {

                d.x = (d.x + offset.x);;
                d.y = (d.y + offset.y);

                return "translate(" + d.x + "," + d.y + ")";
            });
    }
}