cytoscape如何控制子节点在父节点中的位置?

发布于 2022-09-07 12:37:40 字数 1842 浏览 21 评论 0

clipboard.png

  <ReactCytoscape
    containerID="federation"
    elements={this.getElements()}
    style={this.cyStyle()}
    cyRef={cy => { this.cyRef(cy) }}
    cytoscapeOptions={this.cyOptions()}
    layout={this.cyLayout()}
  />

nodes:

 getElements = () => {
    return {
      nodes: [
        {
          data: { id: 'main', name: '主集群', label: '192.168.1.1\n主集群' },
          lock: true,
          position: {
            x: 100,
            y: 200,
          },
        },
        {
          data: { parent: 'main' },
          classes: 'setting',
          position: {
            x: 900,
            y: 200,
          },
        },
        {
          data: { id: 'b' },
        },
        ...this.state.subClusterList,
        ...this.state.settingBtns,
      ],
      edges: [ ...this.state.lines ],
    }

样式:

  {
      selector: 'node',
      css: {
        'text-valign': 'center',
        'text-margin-y': 20,
        'background-color': '#fff',
        shape: 'roundrectangle',
        'border-color': '#2db7f5',
        'border-width': 1,
        color: '#2db7f5',
      },
    },
    {
      selector: '.setting',
      css: {
        shape: 'rectangle',
        'background-image': setting,
        'border-opacity': 0,
        'background-position-y': '10px',
      },
    },
    {
      selector: '#main',
      css: {
        'min-width': 140,
        'min-height': 100,
        'background-image': main,
        'background-position-y': '10px',
        'text-background-shape': 'roundrectangle',
        'text-background-color': 'red',
        'text-max-width': 80,
        'text-wrap': 'wrap',
        label: 'data(label)',
      },
    },

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

软糯酥胸 2022-09-14 12:37:40

请问楼主解决了吗?我现在也有这问题

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文