javascript - 我应该使用 cytoscape.js 中的什么布局名称/类型和配置来实现在每侧显示为圆形的 2 种实体的布局

Question

cytoscape.js 中的布局名称/类型和配置我应该用它来实现下图中的布局，圆形&3层

有 2 种类型的实体在每一侧显示为圆形，一种在循环结构中位于左侧，第二种在循环结构中位于右侧。

这是示例数据结构:

var Nodes=[
  {
    "data": {
      "id": "application1003",
      "type": "application",
      "label": "dataWarehouse",
      "selected": true
    }
  },
  {
    "data": {
      "id": "sub1002",
      "type": "sub",
      "label": "DW_accounts",
      "selected": false,
      "isLeaf": false
    }
  },
  {
    "data": {
      "id": "sub1002topic1002",
      "type": "topic-3leaf",
      "label": "Accounts",
      "selected": false,
      "isLeaf": true
    }
  },
  {
    "data": {
      "id": "sub1004",
      "type": "sub",
      "label": "DW_Campaigns",
      "selected": false,
      "isLeaf": false
    }
  },
  {
    "data": {
      "id": "sub1004topic1101",
      "type": "topic-3leaf",
      "label": "campaigns2",
      "selected": false,
      "isLeaf": true
    }
  }
] 



var Edges=
        [
  {
    "data": {
      "source": "sub1002",
      "target": "application1003"
    }
  },
  {
    "data": {
      "source": "sub1002topic1002",
      "target": "sub1002"
    }
  },
  {
    "data": {
      "source": "sub1004",
      "target": "application1003"
    }
  },
  {
    "data": {
      "source": "sub1004topic1101",
      "target": "sub1004"
    }
  }
]

Answer 1

您可以使用concentric具有开始和结束 Angular 布局，但您必须根据先前的 BFS 设置级别值遍历(即将级别存储在 scratch() 或 data() 中，并在 concentric 中使用该值)。

同心布局中的级别基于任意的、开发人员指定的值 - 与假设遍历级别的 DAG 布局不同 - 因此您需要这个额外的 BFS 步骤。