如何使用 cytoscape 同心布局创建图层

Question

如何使用 cytoscape 同心布局创建图层

我尝试创建具有同心布局的内层和外层。但我无法让它发挥作用。

这就是我的样子：

内部和外部节点混淆了。

这就是我所期望的：

我的数据：

{
 data: [
  {data: {
    id: 'innerA', level: 1 },
    group: 'nodes'
  },
  ....
  {data: {
    id: 'outA', level: 2 },
    group: 'nodes'
   },
  ....
  {
    data: { source: 'innerA', target: 'outA' },
    group: 'edges',
  },
  ....
  ],
}

Run Code Online (Sandbox Code Playgroud)

还有我的布局

layout: {
  concentric: function( node ){
    return node.data("level");
  },
  levelWidth: function( ){
    return 2;
  },
  name: 'concentric',
  minNodeSpacing: 50,
  }
}

Run Code Online (Sandbox Code Playgroud)

根据我的预期，布局中的同心函数将根据节点中的图层属性分配节点。

希望有人有想法。先感谢您。

Answer 1

Has*_*lcı 5

首先，布局将较高级别的节点放置在中心，因此内部节点应具有级别 2，而外部节点应具有级别 1。其次，我不知道 levelWidth 选项如何工作，但使用默认值而不是 2 可以工作。

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

  style: [{
      selector: 'node',
      css: {
        'content': 'data(id)'
      }
    },
    {
      selector: 'edge',
      css: {
        'curve-style': 'straight',
      }
    }
  ],
  elements: [
  {data: {
    id: 'innerA', level: 2 },
    group: 'nodes'
  },
  {data: {
    id: 'innerB', level: 2 },
    group: 'nodes'
  },
  {data: {
    id: 'innerC', level: 2 },
    group: 'nodes'
  },
  {data: {
    id: 'innerD', level: 2 },
    group: 'nodes'
  },  
  {data: {
    id: 'outA', level: 1 },
    group: 'nodes'
   },
  {data: {
    id: 'outB', level: 1 },
    group: 'nodes'
   },
  {data: {
    id: 'outC', level: 1 },
    group: 'nodes'
   },
  {data: {
    id: 'outD', level: 1 },
    group: 'nodes'
   },
  {data: {
    id: 'outE', level: 1 },
    group: 'nodes'
   },
  {data: {
    id: 'outF', level: 1 },
    group: 'nodes'
   },
  {data: {
    id: 'outG', level: 1 },
    group: 'nodes'
   },
  {data: {
    id: 'outH', level: 1 },
    group: 'nodes'
   },   
  {
    data: { source: 'innerA', target: 'outA' },
    group: 'edges',
  },
  {
    data: { source: 'innerB', target: 'outC' },
    group: 'edges',
  },
  {
    data: { source: 'innerC', target: 'outE' },
    group: 'edges',
  },
  {
    data: { source: 'innerD', target: 'outG' },
    group: 'edges',
  },  
  ],
  layout: {
    name: 'concentric',
    concentric: function( node ){
      return node.data("level");
    },
    minNodeSpacing: 50
  }  
});

Run Code Online (Sandbox Code Playgroud)

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

#cy {
  height: 95%;
  width: 95%;
  left: 0;
  top: 0;
  position: absolute;
}

Run Code Online (Sandbox Code Playgroud)

<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://unpkg.com/cytoscape@3.10.0/dist/cytoscape.min.js">
  </script>
</head>

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

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，11 月前
查看次数：	1612 次
最近记录：	5 年，11 月前