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