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: ''
});