search

uber / react-digraph

A library for creating directed graph editors
MIT License
2.62k stars 268 forks source link

How to add constraints to d3 graph layout? #282

Open Malikx-Alee opened 3 years ago

Malikx-Alee commented 3 years ago

How can we use d3 layout and add constraints to it using webcola in react-digraph? If you could suggest any method of implementation it would be a great help.

I want to change the layout generator from dagre to webcola for better layout.

ajbogh commented 3 years ago

You can create a LayoutEngine class and add your own code to it. The LayoutEngine essentially loops through the nodes and modifies the {x,y} properties for each node. You will need a PR to include a new LayoutEngine in the code.

I believe the LayoutEngine uses a string and the engines are defined in the project, but feel free to change the layoutEngineType attribute to accept functions as well so that you can develop your own class or function that is not within the react-digraph codebase (call it layoutEngine instead and deprecate layoutEngineType with a console.warn). You will need to open a PR for this.

Djazouli commented 3 years ago

Hello, I would also like to be able to change the layout generator to customize my rendering a bit. What do you think the new layoutEngine attribute should be ? A class, that we instanciate within the graph-view ? An instance of a class that has an adjustNode method ? Or a function that takes an array of INode, and a nodesMap? (and thus the new layoutEnginewould be the old layoutEngine.adjustNodes ?