Cytoscape.js 警告：当尝试拥有与标签宽度相同的节点时，“不推荐使用‘label’的样式值作为‘width’”

Question

我正在使用Cytoscape.js渲染dagre 布局图。

在设置节点样式时，我使用该属性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 节点的宽度与内部标签的宽度相同？

Answer 1

经过一番测试，我自己找到了解决办法：我决定width从data(name)现场开始计算。

所以，我'width': 'label'用以下箭头函数进行了更改：

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

正如您所看到的，我正在获取length标签字符串（将包含name字段）的值，并将其乘以一个常量（我从这里开始，10但后来我意识到这对我来说7是最好的）。

这样，我就不会收到任何警告，并且图形节点适合标签 ( name) 宽度。

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

您可以使用数据属性设置动态宽度。例如 'width': 'data(label_width)' 这里每个节点都应该有一个名为 label_width 的数据属性