当前位置: 首页 > 知识库问答 >
问题:

是否有一种方法可以在节点内部的顶部显示节点标签?

唐阳飙
2023-03-14

我正在使用Cytoscape.js创建一个图,并在父节点中合成了节点。我希望有主/父节点的标题在节点顶部,但在节点内部。在细胞膜上有可能吗?

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

共有1个答案

宫子晋
2023-03-14

正如您在这里看到的,您只能使用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>
 类似资料:
  • 所以我环顾了一下网络,在stackoverflow中有几个问题是定义: 通常,内部节点是任何不是叶子的节点(没有子节点) 非叶/非末端/内部节点-至少有一个度不等于0的子节点或后代节点 据我所知,它是一个节点,而不是一片叶子。 我即将得出结论,根也是一个内部节点,但它的定义似乎有些模糊,如图所示: 二元搜索树中的“内部节点”是什么? 正如这张精彩的图片所示,内部节点是位于树根和树叶之间的节点 如果

  • 问题内容: 新手问题-可能更适合ServerFault,如果这样的话,抱歉。 我将按照关于安装Node的出色的howtonode说明,在Ubuntu 11.10 上设置node。 我可以在127.0.0.1:8000上运行“ Hello World”页面,但是如何设置它以显示在服务器的外部IP上? 我习惯于配置Apache-与Apache的“ Hello World”页面等效的节点是什么? 谢谢你

  • 我的插入方法解释:我分配了尾巴的“下一个变量”来保存旧节点的地址。我分配了尾部,并将新节点插入列表。 我试着从尾部开始显示列表,然后遍历列表,直到列表到达头部。 问题:但是输入显示C,这不是我想要的。显示方法应显示C、B、A。 我甚至在纸上调试我的代码。我不知道为什么显示器没有检索链接列表中链接的节点的最后地址。它仅检索列表中的最后一个节点,并仅显示列表中的最后一个节点。

  • kubernetes Node 节点包含如下组件: flanneld docker kubelet kube-proxy 使用的变量 本文档用到的变量定义如下: $ # 替换为 kubernetes master 集群任一机器 IP $ export MASTER_IP=10.64.3.7 $ export KUBE_APISERVER="https://${MASTER_IP}:6443" $

  • kubernetes master 节点包含的组件: kube-apiserver kube-scheduler kube-controller-manager 目前这三个组件需要部署在同一台机器上: kube-scheduler、kube-controller-manager 和 kube-apiserver 三者的功能紧密相关; 同时只能有一个 kube-scheduler、kube-cont

  • Kubernetes node节点包含如下组件: Flanneld:参考我之前写的文章Kubernetes基于Flannel的网络配置,之前没有配置TLS,现在需要在service配置文件中增加TLS配置,安装过程请参考上一节安装flannel网络插件。 Docker1.12.5:docker的安装很简单,这里也不说了,但是需要注意docker的配置。 kubelet:直接用二进制文件安装 kub