Я только что начал использовать cytoscape (с макетом cytoscape-klay ) для рендеринга некоторых графиков, и я не могу найти ответы на некоторые из моих вопросов:
- Есть ли способ выровнять график по левому краю? (график, кажется, центрирован по горизонтали, но в моем случае мне нужно, чтобы он начинался слева) Редактировать: мой график не может панорамироваться и масштабироваться, а
panBy и shift не работают - Есть ли способ визуализации графика без указания размеров контейнера? (прямо сейчас, если я не укажу размеры, сам холст имеет размер 0x0, и поскольку я указываю ширину / высоту для каждого узла, я думаю, что это должно быть возможно) Редактировать: я не могу использовать контейнер с абсолютным позиционированием, так как мой взгляд имеет некоторые липкие части. Кроме того, я хочу, чтобы размер контейнера был именно тем, что нужно графику, так как он не может быть перемещен. В настоящее время я делаю следующее для размещения 1 и 2:
const dim = cy.$('*').boundingBox(); // get real size of graph
const container = document.getElementById('#cy');
container.setAttribute('style', `width: ${dim.w - 120}px; height: ${dim.h}px; transform: translateX(-175px)`);
Есть ли способ определить css в файле css или он должен быть в js?
Редактировать: Я знаю, что могу использовать файл js / json - мне интересно, могу ли я также использовать файл css (я предполагаю, что нет, но я просто хочу убедиться) мои узлы должны быть интерактивными (открывать / закрывать), и, поскольку я работаю с Vue. js, я предпочитаю, чтобы мои узлы были Vue компонентами. хотя это кажется невозможным с самим cytoscape, поскольку он поддерживает только метку для узла, я обнаружил пакет
nodeHtmlLabel , который очень близко мне подходит, он не придерживается стилей, заданных в js, и реактивности похоже проблема Есть ли лучшая альтернатива?
Редактировать: я не спрашиваю о составных узлах. Для простого примера того, что мне нужно, вы можете подумать, что у каждого узла есть заголовок и описание, но виден только заголовок, и если вы щелкнете по узлу, он откроется, чтобы показать описание (высота узла изменится) можно ли настроить края? (пусть ребро состоит из прямой линии, соединенной с изогнутой линией Безье, используйте мои собственные контрольные точки и т. д. c.) Если нет, то как работают эти веса / расстояния? они одинаково хорошо работают для графиков сверху вниз и слева направо? (Я пытаюсь получить что-то вроде
this )
Edit: я знаю о текущих типах ребер, но я ищу что-то, что является слиянием между taxi и bezier. Поскольку это в настоящее время не поддерживается, я хотел узнать, есть ли способ определить собственную линию самостоятельно Фон - мне удалось действительно приблизиться к желаемому дизайну с помощью dagre-d3 но у меня проблема с рангами, и кажется, что этот пакет не поддерживается :(, поэтому я решил поискать альтернативу