javascript - Cytoscape.js varning: "Stilvärdet för `label` är föråldrat för `width`" när man försöker ha en nod med samma bredd som etiketten

Jag använder Cytoscape.js för att rendera ett dagre layout-diagram.

När jag stylar noden använder jag egenskapen width: label som du kan se i följande kod:

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'
  }

});

Koden fungerar och noder får samma bredd som de inre etiketterna, men jag får följande varning i konsolen:

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

Fråga: Finns det ett annat sätt att låta Cytoscape noder ha en bredd som är samma som den inre etiketten?

Svar #1

Efter några tester hittade jag en lösning på egen hand: jag bestämde mig för att beräkna width utifrån data(name)-fältet.

Så jag ändrade 'width': 'label' med följande pilfunktion:

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

Som du kan se tar jag length av strängen för etiketten (som kommer att innehålla fältet name) och jag multiplicerar den med en konstant (jag började från 10 men sedan insåg jag att 7 är bäst i mitt fall).

På det här sättet får jag ingen varning och grafnoderna passar etikettens (name) bredd.

En annan lösning är den som föreslogs av canbax i kommentarerna till min fråga:

Du kan ställa in en dynamisk bredd med hjälp av datapropåriteter. Till exempel 'width': 'data(label_width)'. Här ska varje nod ha en datapropåritet som heter label_width.

Svar #2

Jag kom ihåg en annan metod. Här kan du dynamiskt skapa ett canvas-element och ställa in typsnitt och sedan mäta texten.

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

Detta tillvägagångssätt kan vara mer kostsamt, men det kan ge dig mer exakta mätningar