Cola.js + d3.js reinforces directional web - bounding nodes during / after running force solver

I am creating a heroarchy plot with force using Cola.js and d3.js. The nodes are stacked in rows using Y constraints, which I pre-calculated based on the maximum depth of a given node in the hierarchy.

Is there a good way to use Cola.js to also constrain nodes to columns in conjunction with a force solver? I want to center the nodes around Y, but also use force positioning to calculate the shortest distance to the edge and thus minimize the intersection of the edges.

The goal is to make the plot less "squishy", so nodes should be constrained by columns after / during positioning of the force solution. The fiddle below works really well, but with very large networks, the overall network inertia is high, so dragging a single node doesn't move the entire network as fast as I want.

If there is a way to amplify the force solver so that dragging the node quickly moves the entire network, which might work instead of using the X displacement constraints. Cola is trying to simplify the node solution by excluding some force parameters that d3 has, like charge and gravity, so I can't use these (?) to drag the net faster.

Because Cola accepts constraints as an argument before running the solver, setting constraints while maintaining optimal positioning of the node is difficult.

... (example code is too big to insert)





Cola alignment example:


In the above screenshot example, looking at level 3 of the hierarchy, you can see that if I preliminarily constrain the nodes in the order they come from the database, it will result in poor positioning of the node and unwanted border crossing, since the IDs node are of order 7,6,9,8



source to share

1 answer

If I understood correctly, you want to be able to drag a node to the network and follow the whole chain without any elasticity?

One thing you can do is create one pair of alignment constraints (x and y) that maintain the relative horizontal and vertical separation between the nodes emerging from the original layout. That is, use the result of the first call to d3cola.start (5,10,20) (increment the numbers passed to control the number of iterations of the original layout) to determine the x and y offsets for the alignment constraints, which you then add.

Another question though, if you just want to drag the whole graph around as if it were a rigid one object, why not just let the parent group drag and drop into the SVG instead of doing a cola? You mentioned columns, although perhaps you just want to create an x ​​alignment constraint?



All Articles