Что я сейчас делаю:
У меня есть график с переменным количеством узлов.
от 10 до макс.30 узлов (давайте назовем это n)
Макет, который я использую, является чертовым (не то, чтобы это имеет значение) и, в зависимости от данных, между 1 и n типами.Код работает нормально, и я могу отобразить все данные, которые я хочу.Кроме того, в моих подсказках больше текста, чем просто foo и bar :
- Тип разрешения |Название разрешения |Наследуется от
- Идентичность |Изменить информацию о личности |что-то
Проблема:
Из-за функции масштабирования в cytoscape.js, областью просмотра можно манипулировать (и мне нужна эта функция для моей задачи),
То, что случается, когда я увеличиваю и уменьшаю масштаб, выглядит не очень красиво:
- размеры щупальца изменяются от супер малого до слишком большого с очень небольшим увеличением
- если график достаточно большой, узлы часто находятся позади этих подсказок, иногда даже с увеличением 1 (это значение по умолчанию)
- изменяя размер подсказки на 'small' для меня ничего не изменилось
Пример:
Пример не такой экстремальный, как некоторые из моих вариантов использования, но вы можете увидеть, откуда возникла проблема.
document.addEventListener('DOMContentLoaded', function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'content': 'data(id)'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [{
data: {
id: 'a'
}
},
{
data: {
id: 'b'
}
},
{
data: {
id: 'c'
}
},
{
data: {
id: 'd'
}
},
{
data: {
id: 'e'
}
},
{
data: {
id: 'f'
}
},
{
data: {
id: 'g'
}
},
{
data: {
id: 'h'
}
},
{
data: {
id: 'i'
}
},
{
data: {
id: 'j'
}
},
{
data: {
id: 'k'
}
},
{
data: {
id: 'l'
}
},
{
data: {
id: 'm'
}
},
{
data: {
id: 'n'
}
},
{
data: {
id: 'o'
}
},
{
data: {
id: 'p'
}
},
{
data: {
id: 'q'
}
},
{
data: {
id: 'r'
}
},
{
data: {
id: 's'
}
},
{
data: {
id: 't'
}
},
{
data: {
id: 'u'
}
},
{
data: {
id: 'v'
}
},
{
data: {
id: 'w'
}
},
{
data: {
id: 'x'
}
},
{
data: {
id: 'y'
}
},
{
data: {
id: 'z'
}
}
],
edges: [{
data: {
source: 'a',
target: 'b'
}
},
{
data: {
source: 'a',
target: 'c'
}
},
{
data: {
source: 'a',
target: 'd'
}
},
{
data: {
source: 'a',
target: 'e'
}
},
{
data: {
source: 'a',
target: 'f'
}
},
{
data: {
source: 'b',
target: 'g'
}
},
{
data: {
source: 'b',
target: 'h'
}
},
{
data: {
source: 'b',
target: 'i'
}
},
{
data: {
source: 'b',
target: 'j'
}
},
{
data: {
source: 'b',
target: 'k'
}
},
{
data: {
source: 'b',
target: 'l'
}
}
]
},
layout: {
name: 'grid'
}
});
var a = cy.getElementById('a');
var b = cy.getElementById('b');
var makeTippy = function(node, text) {
return tippy(node.popperRef(), {
html: (function() {
var div = document.createElement('div');
div.innerHTML = text;
return div;
})(),
trigger: 'manual',
arrow: true,
placement: 'bottom',
hideOnClick: false,
multiple: true,
sticky: true
}).tooltips[0];
};
var tippyA = makeTippy(a, 'foo');
tippyA.show();
var tippyB = makeTippy(b, 'bar');
tippyB.show();
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
/* makes sticky faster; disable if you want animated tippies */
.tippy-popper {
transition: none !important;
}
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.2/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@2.0.9/dist/tippy.all.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@2.0.9/dist/tippy.css" />
</head>
<body>
<h1>cytoscape-popper tippy demo</h1>
<div id="cy"></div>
</body>
</html>
Решение:
Может быть, кто-то знает правильное свойство для установки максимальной / минимальной ширины поппера / типа?