如何根据 cytoscape.js-edgehandles 中的缩放级别自动更改预览边缘的宽度？

Question

我正在使用 cytoscape.js 和 edgehandles 扩展 (https://github.com/cytoscape/cytoscape.js-edgehandles)。目前，我正在使用事件 'zoom':

自动调整边缘的线宽

cy.on('zoom', function (evt) {
    let zoomFactor = cy.zoom()
    let newFontSize = defaut_font_size.general * 1 / zoomFactor;
    cy.filter("node[type='main-WP'][parent !^= 'compound']").style({
        "font-size": newFontSize,
    });
    cy.edges().style({
        'width': (0.3 * newFontSize),
    });
});

如何在类（.eh-preview、.eh-ghost-edge）上实现类似的功能？

Answer 1

您可以为样式赋予功能。缺点是函数不可 JSON 序列化。因此，如果您需要 import/export 具有 cy.json() 的图表，您还应该应用函数样式。

cy.style().selector('edge.eh-preview')
  .style({
    'width': () => {
      let zoomFactor = cy.zoom()
      let newFontSize = defaut_font_size.general * 1 / zoomFactor;
      return (0.3 * newFontSize);
    },
  }).update();

如何根据 cytoscape.js-edgehandles 中的缩放级别自动更改预览边缘的宽度？

How to automatically change the width of a preview edge according to the zoom level in cytoscape.js-edgehandles?

cytoscape

cytoscape.js