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

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)',
      },
    },
阅读 3.7k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题