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

【问题标题】：Node max size in cytoscape.js dagre layout?cytoscape.js dagre 布局中的节点最大大小？
【发布时间】：2018-02-25 03:37:11
【问题描述】：

我正在构建的项目的主要部分涉及允许用户流畅地创建和编辑 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',
      }
    }
  ]
};

【问题讨论】：

标签： javascript cytoscape.js

【解决方案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: ''
});

【讨论】：