Xrumka

Доброго времени суток! Для того что бы задать плавность изменения(скорость анимации) используется CSS свойство transitions.
Для решения данной задачи можно поступить следующим образом:

$(function () {
    const targetCont= document.querySelector('#cont');
    targetCont.style.transition= 'all 3s';
    document.querySelector('#btnSwitch').addEventListener('click', function() {
      const c= targetCont.classList; 
      c.toggle('col-lg-9');
      c.toggle('col-lg-12');
    document.querySelector('#sid').classList.toggle('d-none');
    document.querySelector('#cont').classList.toggle('sid');
    });
  })

Добрый день! В текущем проекте для решения подобной задачи мы рассмотрели несколько вариантов(storm-react-diagrams, react-dag) и остановили свой выбор на китайский фреймворкеG6. Данный фраймворк имеет большой функционал для построения различного вида диаграмм.
Документация по G6(EN)
Для интеграции G6 в react проект мы использовали пакет g6-for-react