使用 Cytoscape.js 垂直滚动具有固定大小节点的图？

Question

我正在使用 Cytoscape 生成一个简单的流/状态图，并且能够生成图形，但是随着图形的增长，它只是不断缩小，因此节点变得非常小。有没有办法让 Cytoscape 保持高度增长而不是缩小图形并不得不放大？我宁愿让节点保持已知大小（即 100 像素 X 100 像素），并且随着图形的增长并使其垂直增长，因此用户只需向下滚动页面即可查看图形的其余部分。现在，视口仅限于页面首次呈现时的页面高度。让我知道是否有办法实现具有固定大小节点的垂直滚动图。谢谢！

Answer 1

好吧，我认为您可以将缩放量设置为固定并禁用放大/缩小，并使用一些策略来动态更改 div/页面的高度。

This answer 或 this one 应该可以帮到你。

Answer 2

根据 maxkfranz 和 gcpdev 的建议，我想出了以下似乎效果很好的解决方案。

细胞镜初始化：

cy = cytoscape({
    container: document.getElementById('cy'),
    style: cytoscape.stylesheet()
      .selector('node')
      .css({
          'shape': 'roundrectangle',
          'height': 80,
          'width': 150,
          'background-fit': 'cover',
          'background-color': '#F5F5F5',
          'border-color': '#F5F5F5',
          'border-width': 3,
          'border-opacity': 0.5,
          'text-valign': 'center',
          'content': 'data(name)',
       })
       .selector('edge')
       .css({
           'width': 6,
           'target-arrow-shape': 'triangle',
           'line-color': '#0088cc',
           'target-arrow-color': '#0088cc'
       }),
   elements: data,
   zoomingEnabled: false,
   layout: {
       name: 'breadthfirst',
       directed: true,
       padding: 10
   }
}); // cy init

初始化图表后，我们必须将容器 div 的大小设置为至少与图表的边界一样高。我们还需要在有人调整窗口大小时重新设置大小。

cy.on('ready', function () {
    updateBounds();
});
//if they resize the window, resize the diagram
$(window).resize(function () {
    updateBounds();
});

var updateBounds = function () {
    var bounds = cy.elements().boundingBox();
    $('#cyContainer').css('height', bounds.h + 300);
    cy.center();
    cy.resize();
    //fix the Edgehandles
    $('#cy').cytoscapeEdgehandles('resize');
};

每当用户向图中添加节点时，我也会调用updateBounds()。这给了我一个全尺寸并垂直增长的图表。我也可以向下滚动页面！

Answer 3

(1) 布局通常适合图表。设置 layoutOptions.fit: false 以覆盖此默认行为（至少对于包含的布局）。

(2) (1) 的使用意味着运行布局将使图形视口处于重置状态（即默认缩放1 在原点位置{ x: 0, y: 0 }）。如果您希望视口保持在zoom: 1，但平移位置发生了变化，您可以使用cy.pan() 和cy.elements().boundingBox() 进行一些简单的计算。您可能还会发现cy.center() 很有用——尽管在您的情况下可能只是水平的。

(3) 使用 (2) 意味着您的图形视口（即画布）将具有相同的大小，但用户将能够向下平移以查看图形的其余部分。如果您更喜欢滚动而不是平移，则需要为此实现自己的机制。您可以巧妙地组合cy.elements().boundingBox() 和jQuery('#cy-div').css()，例如将cy div 调整为图形的大小。如果图形不是交互式的，您可能想要关闭用户平移和缩放（以及自动锁定节点等）。