Question

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

Answer 1

根据maxkfranz和gcpdev的建议，我提出了以下似乎运行良好的解决方案。

Cytoscope Init：

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 2

（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调整为图表的大小。如果图形不是交互式的，您可能需要关闭用户平移和缩放（以及自动锁定节点等）。

Answer 3

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

This answer或this one可以为您提供帮助。

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

3 个答案: