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

Question

我正在使用 Cytoscape.js渲染 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'
  }

});

代码正常运行，节点获得与内部标签相同的宽度，但我在控制台中收到以下警告:

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

问题有没有另一种方法可以让 Cytoscape nodes 具有与内部 label< 相同的宽度/em>?

Answer 1

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

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

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

如您所见，我使用标签字符串的 length(将包含 name 字段)并将它乘以一个常量 (我从 10 开始，但后来我意识到 7 对我来说是最好的)。

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

另一种解决方案是 canbax 建议的解决方案在对我的问题的评论中:

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