Cytoscape.js

Question

在 cytoscape 中，我想创建圆形节点，直径取决于节点标签（标签位于节点中心）。我设置了以下内容：

style: {
    'shape': 'ellipse',
    'width': 'label'
}

如何使高度取决于宽度值？设置 'height': 'label' 将高度设置为标签的高度。

Answer 1

根据标签长度和字体，您可以在 javascript 向图形添加节点的部分设置宽度和高度，并将其余样式留给引擎初始化。

例如：

cy.add({
        group: 'nodes',
        style: {
            height: (10*label.lenght),
            width: (10*label.lenght),
        }
    })

Answer 2

如果你可以使用固定宽度的字体，那么@BeerBaron 的答案是最好的。

或者，使用您在 OP 中的样式表：

style: {
  'shape': 'ellipse',
  'width': 'label',
  'height': 'data(height)'
}

更新节点高度作为步骤post-init，例如

cy.nodes().forEach(function( n ){ n.data('height', n.width()); });

您可能应该在初始化时将每个节点的 data.height 预设为某个默认值以方便调试（例如，当您稍后添加新节点时）。

Cytoscape.js - 创建大小为圆形的节点