cytoscape.js - 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();
			});

节点会使用新字体进行更新，但由于字体已更改，文本不会保留在绘制的椭圆内。

应用样式更改后如何让节点重新渲染？

标签： cytoscape.js

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

});