Как правильно соединить react и d3.js в древовидной структуре?

Question

[cfif11]

Есть древовидная структура, хочется, чтобы каждый узел был некоторый объект с точки зрения d3 и с точки зрения react-а. Так же хочется чтобы при добавлении узла, масштабировалось всё дерево (если это необходимо).

Что-то типа такой структуры: bl.ocks.org/mbostock/4339083, только чтобы каждый узел был объектом react-а.
Только не совсем чистое дерево, у узла может быть два предка.

Answer 1

[Слава]

https://github.com/esbullington/react-d3

Comments

[cfif11]

Эта библиотека не поддерживает структуру дерева. Только treeMap.

[Слава]

Понял. Т.е вам нужно контролировать дерево через react, а д3 вам тогда зачем? Тоже управлять? Анимировать?

[cfif11]

Слава: Анимировать и рисовать по сути. Так же отправлять запросы на сервер и прочие экшены.

Answer 2

[Ninja Mate]

Мне не удалось заставить реакт работать нормально с d3. D3 создаю через componentDidMount и через ref цепляю к div который создаю реактом, если нужно внести изменения типа resize, то приходится пересоздавать весь элемент реакта с новыми props ( не просто рендерить, а вначале заменять на ' ', а потом уже на ) иначе не работае.
Сама библиотека нормально работает с событиями внутри svg и дополнительно css фичи использую.
как то так...

Comments

[cfif11]

У d3 по умолчанию отличный конфигуратор деревьев с автомасштабированием. Не хочется этим заниматься самому, особенно с учётом того, что мне надо поддерживать автомасштабирование при динамическом добавлении узлов. на reqct удобно работать с этими динамическими событиями, но всю отрисовку хочется переложить на стороннюю библиотеку

[cfif11]

а можете помочь разобраться с примером, и перевести его в "redux" стиль: codepen.io/anon/pen/vNQqoQ?

[Ninja Mate]

cfif11: я redux не юзаю. все на чистом реакте бацаю. первый проект на редакте только делаю.