cytoscape.js - 有没有办法在节点内部的顶部显示节点标签？

Question

我正在使用 cytoscape.js 创建一个图形，并且我在父节点内有复合节点。我想在节点顶部但在节点内部有主/父节点的标题。这在细胞景观中可能吗？

我尝试过使用 halign 和 valign。每当我使用最高值时，它都会显示在框外。

是否有一个扩展或插件可以让我们做到这一点？

子节点示例：https ://stackblitz.com/edit/cytoscape-call-method-child-efmbaj?file=src%2Fapp%2FstylesheetObject.ts

score 5 · Accepted Answer

正如您可以在此处阅读的那样，您只能将标签放置在带有 center 选项的节点内，一个好的配置（标签在顶部）需要在标签中添加边距：

.selector(':parent')
  .css({
    'text-valign': 'center',
    // the next line moves the parents label up to the top of the node and 5px down to create a padding 
    'text-margin-y': function (node) { return -node.height() + 5 }
})

这是一个工作示例：

var cy = cytoscape({
  container: document.getElementById('cy'),

  style: cytoscape.stylesheet()
    .selector(':parent')
    .css({
      'text-valign': 'center',
      'text-margin-y': function(node) {
        return -node.height() + 5
      }
    })
    .selector('node')
    .css({
      'height': 'data(size)',
      'width': 'data(size)',
      'border-color': '#000',
      'border-width': '1',
      'content': 'data(name)'
    })
    .selector('edge')
    .css({
      'width': 'data(strength)'
    })
    .selector('#1')
    .css({
      'background-color': 'red'
    })
    .selector('#4')
    .css({
      'background-color': 'green'
    }),

  elements: {
    nodes: [{
        data: {
          id: '1',
          size: 50,
          name: 'a'
        }
      },
      {
        data: {
          id: '2',
          size: 20,
          name: 'b',
          parent: '1'
        }
      },
      {
        data: {
          id: '3',
          size: 40,
          name: 'c',
          parent: '1'
        }
      },
      {
        data: {
          id: '4',
          size: 50,
          name: 'd'
        }
      },
      {
        data: {
          id: '5',
          size: 20,
          name: 'e',
          parent: '4'
        }
      },
      {
        data: {
          id: '6',
          size: 40,
          name: 'f',
          parent: '4'
        }
      }
    ],
  },
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

score 4 · Accepted Answer

我的理解是你想把父标签放在孩子上方的盒子里？抱歉，如果我错了

如果是这样，我的解决方案是添加填充，然后应用边距进行对齐。

修改了你的例子

样式更新：

'填充顶部'：60

selector: 'node',
css: {
  content: 'data(label)',
  'text-valign': 'center',
  'text-halign': 'center',
  'font-size': 28,
  'padding-top':60
}

'text-valign': 'top'和 ' text-margin-y': function(node) { return node.height() - 10; }

selector: 'node[type="parent"]',
style: {
  shape: 'rectangle',
  'background-color': 'grey',
  width: 300,
  height: 100,
  'font-size': 25.5,
  'font-family': 'Lato, Helvetica Neue, Helvetica, Arial, sans-serif',
  color: 'black',
  'text-valign': 'top',
  'text-halign': 'center',
  'text-margin-y': function(node) {
    return node.height() - 10;
  }
}

cytoscape.js - 有没有办法在节点内部的顶部显示节点标签？

2 回答 2

Related

Reference