Question

我目前正在做什么：

我有一个节点数量可变的图。

在10到最大之间。 30个节点（我们称其为n）

我使用的布局是dagre布局（并不重要），并且根据数据，介于1到n个小尖峰之间。该代码工作正常，我可以显示我想要的所有数据。另外，我的小费还有更多的文字，它们只是 foo 和 bar ：

权限类型|权限名称|继承自
身份|编辑身份信息|东西

问题：

由于cytoscape.js的zooming feature，可以操纵视口（我的任务需要该功能）。

当我放大和缩小时，发生的事情看起来并不那么漂亮：

尖头的大小从超小到太大，而缩放却很少
如果图形足够大，则节点通常位于这些尖尖的后面，有时甚至是缩放1（这是默认值）
将小费的大小更改为'小'对我来说并没有太大变化

示例：

该示例并不像我的一些用例那么极端，但是您可以看到问题出处。

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的最大/最小宽度？

Answer 1

您可以执行以下几项操作来控制总体大小，从最小到最大：

控制您时髦的内容周围的装饰：修改或覆盖tippy随附的样式表。它指定了诸如边框，背景色，三角形大小之类的内容。
控制内容的大小：将尖细的内容（html）作为div与一个类（例如<div class="my-tippy-content">content goes here</div>）放置在一起，然后可以使用应用程序的CSS来控制内容的大小内容（最大宽度，字体大小等）。
控制何时显示小费：如果您一次激活了许多小费，则在某些情况下（例如缩小时）显示它们可能不切实际。在这种情况下，自动隐藏小费可能是有意义的。

可能还有其他方法，但这是我使用的主要方法。

Answer 2

如果有人仍在寻找答案，请尝试

//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);

滚动后提示大小过大

我目前正在做什么：

问题：

示例：

解决方案：

2 个答案: