Сложные графики и диаграммы на React и React-Native

Я начну новый проект, для которого потребуются специальные диаграммы и графика. Я буду создавать специальные тренды, аналитику и диаграммы Ганта для тонн данных, хранящихся в облаке.

Раньше я использовал D3/Raphael/Ant + JQuery, но теперь я перехожу на мобильные устройства и React. Насколько мне известно, svg tas — это DOM-теги как HTML-теги, поэтому мое первое впечатление — React нормально с этим справится. Я также слышал о Tiny SVG, подмножестве SVG для мобильных устройств, так что вот мои сомнения:

а) Будут ли React и React Native нормально работать с SVG? Есть ли ограничения на его использование?

б) Какой должна быть спецификация Tiny SVG, выпущенная в 2013 году?

c) В старых браузерах обычно SVG не поддерживается. В настольном приложении я использовал Raphael с javascript, но что для React и React Native?

г) Поддерживается ли D3 для React и React Native для обработки данных?

e) Поддерживается ли Raphael в средах React и React Native?

f) Поддерживается ли Ant в средах React и React Native?

g) Какова производительность приложения в случае стека D3, Raphael или Ant, React или React Native, особенно в мобильной среде?

Если есть лучшие практики или желаемый стек для использования в React или React Native, я был бы рад услышать.


react-native reactjs antd d3.js raphael
person Mendes    schedule 16.06.2017    source источник
comment
SVG и React - несвязанные вещи - не совсем понятно, какие ограничения вы себе представляете?   -  person Oliver Charlesworth    schedule 16.06.2017

Ответы (2)


arrow_upward
4
arrow_downward

а) Да, React и React-native очень эффективно работают с SVG. React-Native имеет собственную библиотеку ART, которую вы можете импортировать для создания графики, но она все еще находится в стадии разработки.

б) В React и React Native все является компонентом. Так что было бы не очень хорошей идеей использовать Tiny SVG.

в) Существует множество возможных вариантов генерации SVG. Вы можете импортировать ART из самого react-native, но, как я уже упоминал, он все еще находится в стадии разработки, я больше всего предпочитаю «react-native-svg». Простой в использовании и очень ухоженный пакет.

г) Да, D3 поддерживается для обоих. Но не оригинальный D3, так как в нем отсутствует компонентная система. Вместо этого вам нужно использовать react-d3, поскольку в нем реализованы компоненты. Это одна из самых мощных и настраиваемых библиотек для работы с диаграммами с нуля. Для реализации вы можете проверить мой реактивный проект здесь где я использовал как reat-native-svg, так и react-d3.

e) вместо него доступен react-raphael.

f) Да Ant поддерживается. Взгляните на «Ant Design of React».

g) Не использовал Raphael или Ant, но могу заверить вас, что react-d3 отлично работает в нативной среде!

person Utkarsh Sah    schedule 17.06.2017

arrow_upward
0
arrow_downward

а) Есть ограничения. React Native использует родное искусство реакции, которое не может принимать обычный svg, как в Интернете. Кроме того, svg, которые он может создавать, — это просто представления, а не масштабируемые векторы, к которым вы привыкли. Однако существуют библиотеки, которые могут компилировать сложные svg в собственные представления.

c) несколько решений для svg в React Native, я видел следующее: https://github.com/react-native-community/react-native-svg.

г) d3js не поддерживается, так как не использует собственные представления. Эмпирическое правило заключается в том, что если у него есть веб-интерфейс, он не будет работать с родным реагированием. Если это просто javascript, то есть lodash, он будет работать.

д) см. г

g) По моему опыту, svgs, как они есть, имеют утечки памяти в React Native, и это может вызвать проблемы с производительностью. Возможно, они исправили это в более новой сборке. Последний, который я использовал, это .40

person tnyN    schedule 16.06.2017