Комментарии 14
Статья супер!
А будет продолжение?
Как делать легенду к графику? Как делать перетаскивание, зум, autoresize, выделение области, зум области, всплывающее окно при наведении?
Меня привлек готовый функционал навигации по графикам (перетаскивание, масштабирование). Но как сделать там свой курсор ума не приложу.
Что можете сказать про plotly.js по сравнению с recharts.js?
Я plotly.js не пробовал если честно. Но вы также зашли в тупик, так почти всегда с готовыми решениями, когда нужен сильный кастом
Сейчас как раз перехожу на plotly.js с кастомного решения. Решение было хорошим (не моим), но… начисто проигрывало plotly.js по функционалу и по производительности.
Но как сделать там свой курсор ума не приложу.А что вы имеете ввиду под своим курсором?
Что можете сказать про plotly.js по сравнению с recharts.js?Сравнивал недавно, Recharts просто-напросто очень медленный. В принципе это было ожидаемо (реакт жеж).
Это описано в документации (которой много, да), и можно найти кучу примеров на community.plotly.com. Вообще пока с проблемами кастомизации в плотли сталкивался только в funnel chart — трапеции нужны вместо прямоугольников, но и это решается через изменение svg в коллбеке события relayout.
Подскажите плиз в одном моменте в plotly.js. у меня приложение на реакте, понадобилось внедрять анализ данных в виде графиков. Смотрел несколько библиотек и остановился на этой. И вот никак не могу внедрить plotly. Постоянно выдает ошибку что документ не найден. Немного погуглив, понял то преблема известная. В репозитории у них есть открытое issue по этой проблеме, которое заканчивается тем, что они просят оказать спонсорскую помощь для устранение сей проблемы. Как вам удалось ее внедрить? Я так понял у вас тоже реакт?
При этом, скажу сразу, что большая часть этой библиотеки уже устарела, и ее не стоит использовать. Именно ту часть, где идут манипуляции с DOM узлами, эту задачу мы будем максимально перекладывать на React.
Очень сильно утверждение.
Мне кажется вы до конца не разобрались в чем именно сила d3. Она не в наборе библиотечных функций для построения layout и т.п., а как раз в работе с DOM и динамическом обновлении данных. Данные — в данном случае это не просто точки, а некоторые сущности (следовало бы добавить для них id). И d3 через паттерн enter update exit позволяет оперировать разными состояниями этих сущностей. Можно отдельно анимировать появление новых сущностей, обновлять уже существующих и удалять устаревшие.
Попробуйте, например в ваш пример scatter plot (№3) добавить fadeIn, fadeOut для появления и удаления сущностей, а также анимирование перемещения существующих окружностей и вы поймете, что в реакте с этим туго.
Вообще как мне кажеться, идея «Виртуального дома» была успешно заимтвована из d3 selection
Спасибо за замечание! Возможно я не очень корректно выразился в этом плане.
Посыл был в том, чтобы как можно больше задействовать инструменты, которые мы уже знаем – все анимации и обновление DOM через React. Это критически важно, когда вы делаете проект, который будут поддерживать после вас, чтобы человек смог быстро разобраться, не погружаясь в глубины D3
Визуализация сложных данных с использованием D3 и React