cytoscape.js dagre布局中的节点最大大小？

Question

我正在构建的项目的一个主要部分涉及允许用户流畅地创建和编辑DAG。我正在使用React、cytoscape.js、cytoscape edgehandles和dagre布局来完成这项工作，它工作得很好，除了一个恼人的问题。当图只有几个节点时，节点是巨大的！

这是因为我在布局选项中将fit设置为true (默认值)。我需要保留此设置，因为随着图形的增长，我希望它们缩小以适合用户，除非用户选择放大。我只是不想让前1-4个节点太大！有没有办法定义节点的最大高度/宽度，或者控制缩放级别，以便节点从合理的大小开始，只有在必要时才开始变小？

这是我的布局：

​

cy.layout({
      name: 'dagre',
      ranker: 'longest-path',
      padding: 15
    }).run();

​

下面是我的风格设置：

const cyConfig = {
  elements: [],
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(name)',
        'color': '#2C2029',
        'text-valign':'center',
        'text-halign': 'center',
        'font-size': '25px',
        'font-family': 'Nixie One, cursive',
        'shape': 'roundrectangle',
        'background-color': 'mapData(inDegree, 1, 8, rgba(163, 154, 164), rgba(240, 146, 60))',
        'background-opacity': 'mapData(inDegree, 1, 8, .3, 1)',
        'border-color': 'transparent',
        'width': 'label',
        'height': 'label',
        'padding': '7px'
      }
    }, {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'target-arrow-shape': 'triangle',
        'target-arrow-fill': 'hollow',
        'target-arrow-color': '#2C2029',
        'width': '1px',
        'color': '#2C2029',
      }
    }
  ]
};

​

Answer 1

您始终可以像这样定义节点：

style: [
            {
                selector: 'node',
                style: {
                    'shape': 'data(faveShape)',
                    'content': 'data(DisplayName)',
                    'height': 'data(faveHeight)',
                    'width': 'data(faveWidth)',
                    'background-color': 'data(faveColor)',
                    'line-color': '#a8eae5',
                    'font-family': 'Segoe UI', 
                    'font-size': '15px',
                }
            }
]

如果这样做，您可以检查要添加到cytoscape窗口的节点数，然后根据要添加的节点数定义其宽度和高度属性：

jsonNew.push({
        data: {
               id: yourId,
               parent: '',
               faveShape: 'yourShape',
               faveHeight: ((nodes.length > 7) ? nodes.length * 3 : nodes.length * 6),
               faveWidth: ((nodes.length > 7) ? nodes.length * 5 : nodes.length * 10),
               faveColor: '#ffffff'                                       
        },
        position: {
                    x: '',
                    y: ''
        },
        parents: '',
        group: 'nodes',
        removed: false,
        selected: false,
        selectable: true,
        locked: false,
        grabbable: true,
        classes: ''
});