Радиальный макет дерева для cytoscape.js?

Я попытался получить радиальную компоновку дерева, используя компоновку concentric в cytoscape.js. Результирующий макет должен быть похож на Радиальное аккуратное дерево для d3js (https://beta.observablehq.com/@mbostock/d3-radial-tidy-tree).

Граф направлен, имеет ~ 1800 ребер и ~ 1500 узлов, из которых 9 являются корневыми узлами. Узлы распределены по 12 уровням. Большинство узлов относятся к одному из 4 уровней, другие уровни редко имеют узлы. Ребра от узла всегда нацелены на узлы на более низких уровнях, но узел может иметь ребра к узлам на разных уровнях.

Раскладка concentric вроде не подходит. Есть ли другой макет cytoscape.js для макетов радиальных деревьев?

Подскажите, пожалуйста, почему не подходит концентрическая раскладка? Спасибо

Stephan T. 25.10.2018 07:34

1. Концентрическая компоновка всегда создает большое расстояние между узлами с более низкими уровнями и узлами с более высоким уровнем 2. Узлы не сгруппированы таким образом, что подчиненные узлы находятся более или менее в одном и том же сегменте круга, они иногда слишком много распределяется или в других сегментах, вызывая много пересечений краев. Возможно, я неправильно использую концентрическую компоновку, но у меня сложилось впечатление, что это особенности, присущие концентрической компоновке. Вот пример моего графика: jsfiddle.net/hqs2j4aL/9

Andreas Kohlbecker 25.10.2018 12:17

Ах, хорошо, проблема в том, что настольная версия cytoscape делает это (вы можете разместить каждый узел на холсте, и это, вероятно, будет хорошо выглядеть), cytoscape.js действительно не имеет такой функции. Если у вас есть установленный источник данных, вы можете разместить каждый узел и экспортировать его в cy.js .... с изменением данных у вас будут плохие времена, я думаю: [

Stephan T. 25.10.2018 15:52

Размещение> 1500 узлов вручную мне не кажется подходящим решением. В любом случае, спасибо за ответ. Значит, в cy.js нет ни макета, ни расширения, которое позволяет разложить граф в виде радиального дерева? Поскольку cy.js сосредоточен на молекулярной биологии, я ожидал, что он также будет поддерживать тройки биологических классификаций. За исключением отсутствия радиальной схемы расположения деревьев, она в принципе идеально подходит для данных о биоразнообразии.

Andreas Kohlbecker 26.10.2018 08:06

Я полностью с вами согласен, но как бы я ни хотел подобный макет, я не понаслышке знаю, насколько сложно кодировать сложный и гибкий макет для cytoscape. Можете ли вы использовать d3.js для своего проекта?

Stephan T. 26.10.2018 08:28

Да, именно d3.js я буду использовать сейчас. СПАСИБО.

Andreas Kohlbecker 26.10.2018 08:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
6
521
0

Другие вопросы по теме