边缘标签在Cytoscape.js图形中被截断

时间:2020-09-22 03:53:12

标签: javascript css graph cytoscape.js

我正在使用带有节点和边缘样式的Dagre布局显示cytoscape图:

{
        selector: 'node',
        style: {
            'label': 'Test Nodes',
            'height': 100,
            'width': 250,
            "z-index": 10,
            'text-wrap': 'wrap',
            'text-max-width': 200,
            'background-fit': 'cover',
            'background-color': '#C0C0C0',
            'text-overflow-wrap': 'whitespace',
            'shape': 'rectangle',
            'border-color': '#000',
            'border-width': 3,
            'border-opacity': 0.5,
            'content': 'Test Nodes',
            'text-halign': 'center',
            'text-valign': 'center',
        }
    },
    {
        selector: 'edge',
        style: {
            'width': 6,
            'label': 'owns 100.00%',
            'target-arrow-shape': 'triangle',
            'line-color': '#ffaaaa',
            'target-arrow-color': '#ffaaaa',
            'curve-style': 'unbundled-bezier',
            'text-margin-x': '10px',
            'edge-text-rotation': 'autorotate',
        }
    },

我对根节点和叶节点使用其他样式

cy.nodes().roots().style({
   'shape': 'round-octagon',
   'background-color': '#dda474',
   'height': 140,
   'width': 250,
})
cy.getElementById(organizationId).style({
   'shape': 'round-octagon',
   'background-color': '#90EE90',
   'height': 140,
   'width': 250,
})

采用上述样式时,图形的边缘标签将被切除,如图所示

enter image description here

如何避免边缘标签被切断?

0 个答案:

没有答案