Search code examples
vis.jsvis.js-network

How can I set node positions in a hierarchical layout?


I have a network drawn by vis.js in hierarchical fashion (top-down). I can call getPositions to retrieve any node's X coordinate after moving nodes left and right with mouse interaction, but when I call storePositions the nodes are moved back to their original positions, where they were drawn when first added to the Network.

I am looking to have the user be able to control the position of each node in its "free" axis of movement (i.e., in a top-down hierarchical layout, node y positions are set by node.level, but node x positions are set by user interaction and remain persistent)


Solution

  • A couple of edits to LayoutEngine.js solved this. Mostly so I don't forget: LayoutEngine::setupHierarchicalLayout can be patched to resync the Node in question with its x or y values in the Dataset.

    Inside LayoutEngine::setupHierarchicalLayout, one can set this.body.nodes[nodeId].x or this.body.nodes[nodeId].y to their desired location.

    See also:

    Vis.js pull request #4183