Cytoscape JS - 字体更改后重绘节点

Question

我的 Cytoscape 图的风格是

selector: 'node',
      style: {
        'background-color': '#efefef',
        'label': function(ele) { return ele.data('name'); },
        'font-family' : 'Calibri',
        'font-size' : '10px',
        'shape' : 'ellipse',
        'text-halign' : 'center' ,
        'text-valign' : 'center',
        'width' : 'label' ,
        'padding' : '8px' ,
  'text-wrap' : 'wrap' ,
  'text-max-width' : '120px' ,
  'border-color' : '#ffbb33',
  'border-style' : 'solid' ,
  'border-width' : '1'
      }

我有一个下拉框，允许用户 select 一种字体。当用户在下拉列表中更改字体时，我基本上运行这段代码

$('#font').change(function(){
    
    window.cy.nodes().forEach(function( ele ){
     ele.style('font-family', $('#font').val());
    });
    
    window.cy.resize();
    //window.cy.layout({name : 'klay'}).run();
    //window.cy.elements('#13, #14, #15, #16, #17, #18').layout({name: 'cose'}).run();
   });

节点已更新为新字体，但文本不会保留在绘制的椭圆内，因为字体已更改。

如何在应用样式更改后让节点重新呈现？

Answer 1

好的。这非常简单 - 更改样式并使用 window.cy.json({});

进行更新

$('.x-bold').click(function(){
    let cyJson = window.cy.json(true);
    let style = cyJson.style[0];

    style.style['font-weight'] = 'bold';
    cyJson.style[0] = style;

    window.cy.json({style : cyJson.style });

});

Cytoscape JS - 字体更改后重绘节点

Cytoscape JS - Redraw Nodes after Font Change

cytoscape.js