Cytoscape.js 警告："The style value of `label` is deprecated for `width`" 试图让节点具有相同的标签宽度时

Question

我正在使用 Cytoscape.js to render a dagre layout 图表。

在设置节点样式时，我使用属性 width: label，如您在以下代码中所见：

const cy = cytoscape({

  container: document.getElementById('cyGraph'),
  maxZoom: 3,
  minZoom: 0.3,
  elements: dataForCytoscape,

  style: [
    {
      selector: 'node',
      style: {
        'shape': 'round-rectangle',
        'background-color': '#fff',
        'label': 'data(name)',
        'text-valign': 'center',
        'color': '#333333',
        'border-width': 1,
        'border-color': '#2E1A61',
        'width': 'label',
        'font-size': '10px',
        "padding-left": '5px',
        "padding-right": '5px',
        "padding-top": '5px',
        "padding-bottom": '5px'
      }
    },
    {
      selector: 'edge',
      style: {
        ...
      }
    }
  ],

  layout: {
    name: 'dagre'
  }

});

代码正常工作，nodes 获得与内部 labels 相同的宽度，但我收到以下 warning 在控制台中：

The style value of `label` is deprecated for `width`

问题：有没有其他方法可以让Cytoscapenodes的宽度和里面的label?

一样

Answer 1

经过一番测试，我自己找到了解决方案：我决定从data(name)字段开始计算width。

因此，我将 'width': 'label' 更改为以下 arrow function：

'width': (node:any) => { return node.data('name').length * 7 }

如您所见，我使用标签字符串的 length（将包含 name 字段）并将其乘以常数（我从 10 但后来我意识到 7 是最好的 就我而言 ).

这样，我没有任何警告并且图形节点适合标签 (name) 宽度。

另一种解决方案是 canbax 在对我的问题的评论中提出的解决方案：

You can set a dynamic width using data properties. For example 'width': 'data(label_width)' Here every node should have a data property called label_width

Answer 2

我想起了另一种方法。这里可以动态生成一个canvas元素并设置字体然后测量文字。

'width': (node) => { 
    const ctx = document.createElement('canvas').getContext("2d");
    const fStyle = node.pstyle('font-style').strValue;
    const size = node.pstyle('font-size').pfValue + 'px';
    const family = node.pstyle('font-family').strValue;
    const weight = node.pstyle('font-weight').strValue;

    ctx.font = fStyle + ' ' + weight + ' ' + size + ' ' + family;
    return ctx.measureText(node.data('name'));
}

这种方法可能成本更高，但它可能会为您提供更准确的测量结果

Cytoscape.js 警告："The style value of `label` is deprecated for `width`" 试图让节点具有相同的标签宽度时

Cytoscape.js warning: "The style value of `label` is deprecated for `width`" when trying to have a node with same width of label

javascript

css

typescript

cytoscape.js