滚动后 Tippy 尺寸太大
Tippy size is too big after scrolling
我目前在做什么:
我有一个节点数量可变的图表。
between 10 and max. 30 nodes (lets call this n)
我使用的布局是 dagre 布局(这并不重要),根据数据,在 1 到 n 个 tippy 之间。代码运行良好,我可以显示我想要的所有数据。另外,我的 tippy 有更多的文字 foo 和 bar :
- 权限类型 |权限名称 |继承自
- 身份 |编辑身份信息 |东西
问题:
由于 cytoscape.js 的 zooming feature,可以操纵视口(我的任务需要该功能)。
当我放大和缩小时,会发生什么情况:
- tippy 的尺寸从超小到太大,几乎没有缩放
- 如果图足够大,节点通常在这些尖头的后面,有时甚至缩放 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>
解决方案:
也许有人知道正确的属性设置popper/tippy的max/min宽度?
您可以通过多种方式来控制整个毛尖大小,从最小到最大:
控制 tippy 内容周围的装饰:修改或覆盖 tippy 附带的样式表。这指定了边框、背景颜色、三角形大小等内容。
控制内容的大小:将内容 (html
) 设置为 div 和 class(例如 <div class="my-tippy-content">content goes here</div>
。然后,您可以使用应用程序的 CSS 来控制内容的大小(最大宽度、字体大小等)。
控制小尖头何时可见:如果同时激活多个小尖头,在某些情况下(例如缩小时)显示它们可能不切实际。在这些情况下,自动隐藏 tippies 可能是有意义的。
可能还有其他方法,但这些是我使用的主要方法。
如果有人还在寻找答案,试试这个
//popper is your cytoscape-popper
const update = () =>{
//Check zoom and adjust size of popper
const zoom = cy.zoom();
//my zoom max is 1.5
if(zoom < 1.25){
//Direct DOM ACCESS :(
popper.popper.style.fontSize = CONSTANTS.POPPER.FONT.SIZE * zoom + 'px';
}
//if we reach a point where we cannot read the popper anymore
if(zoom < .65){
if(popper.popper.style.display === ''){
popper.popper.style.display = 'none';
}
}else{
if(popper.popper.style.display !== ''){
popper.popper.style.display = '';
}
}
popper.scheduleUpdate();
};
//Cy is the cytoscape reference, .on for events pan and zoom
cy.on('pan zoom', update);
我目前在做什么:
我有一个节点数量可变的图表。
between 10 and max. 30 nodes (lets call this n)
我使用的布局是 dagre 布局(这并不重要),根据数据,在 1 到 n 个 tippy 之间。代码运行良好,我可以显示我想要的所有数据。另外,我的 tippy 有更多的文字 foo 和 bar :
- 权限类型 |权限名称 |继承自
- 身份 |编辑身份信息 |东西
问题:
由于 cytoscape.js 的 zooming feature,可以操纵视口(我的任务需要该功能)。
当我放大和缩小时,会发生什么情况:
- tippy 的尺寸从超小到太大,几乎没有缩放
- 如果图足够大,节点通常在这些尖头的后面,有时甚至缩放 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>
解决方案:
也许有人知道正确的属性设置popper/tippy的max/min宽度?
您可以通过多种方式来控制整个毛尖大小,从最小到最大:
控制 tippy 内容周围的装饰:修改或覆盖 tippy 附带的样式表。这指定了边框、背景颜色、三角形大小等内容。
控制内容的大小:将内容 (
html
) 设置为 div 和 class(例如<div class="my-tippy-content">content goes here</div>
。然后,您可以使用应用程序的 CSS 来控制内容的大小(最大宽度、字体大小等)。控制小尖头何时可见:如果同时激活多个小尖头,在某些情况下(例如缩小时)显示它们可能不切实际。在这些情况下,自动隐藏 tippies 可能是有意义的。
可能还有其他方法,但这些是我使用的主要方法。
如果有人还在寻找答案,试试这个
//popper is your cytoscape-popper
const update = () =>{
//Check zoom and adjust size of popper
const zoom = cy.zoom();
//my zoom max is 1.5
if(zoom < 1.25){
//Direct DOM ACCESS :(
popper.popper.style.fontSize = CONSTANTS.POPPER.FONT.SIZE * zoom + 'px';
}
//if we reach a point where we cannot read the popper anymore
if(zoom < .65){
if(popper.popper.style.display === ''){
popper.popper.style.display = 'none';
}
}else{
if(popper.popper.style.display !== ''){
popper.popper.style.display = '';
}
}
popper.scheduleUpdate();
};
//Cy is the cytoscape reference, .on for events pan and zoom
cy.on('pan zoom', update);