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'
      }

我有一个下拉框，允许用户选择字体。当用户在下拉菜单中更改字体时，我实际上运行了这段代码]

$('#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 });

});