Приклад Діаграма Санкі - Rete.js

Діаграма Санкі

КастомізаціяУпорядкування

Діаграма Санкі базується на класичному пресеті редактора вузлів і включає кастомні компоненти для вузлів, з’єднань і сокетів. Вузлам надається заздалегідь визначена ємність (рівна висоті), а порти генеруються для кожного з’єднання з висотою (вагою), що дорівнює вазі з’єднання.

Інтегрувати цю фічу у вашому проекті легко – просто скопіюйте каталог sankey і деякий код з editor.ts, включаючи параметри Presets.classic.setup та importGraph. Крім того, ви можете обмежити рух вузлів за допомогою createSankeyRestrictor, щоб вихідні вузли залишалися ліворуч від вхідних. Нарешті, додайте параметр до arrange.layout, щоб збільшити відстань між вузлами.

Цей приклад розроблено спеціально для React.js, але ви можете адаптувати його для використання в інших рендерінг плагінах, адаптувавши кастомні компоненти до свого стеку.