如何创建具有cytoscape同心布局的图层

2024-05-14 • 问答

我试图用同心的布局创建一个内层和外层。但是我不起作用。

这是我的样子：

内部和外部节点混合在一起。

这就是我所期望的：

我的数据：

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

我的布局

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

根据我期望的布局中的同心函数，将分配节点取决于节点中的layer属性。

希望有人有一个主意。预先谢谢你。

首先，布局将较高级别的节点朝向中心放置，因此您的内部节点应具有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',{data: {
    id: 'innerC',{data: {
    id: 'innerD',{data: {
    id: 'outA',level: 1 },group: 'nodes'
   },{data: {
    id: 'outB',{data: {
    id: 'outC',{data: {
    id: 'outD',{data: {
    id: 'outE',{data: {
    id: 'outF',{data: {
    id: 'outG',{data: {
    id: 'outH',{
    data: { source: 'innerA',target: 'outA' },group: 'edges',},{
    data: { source: 'innerB',target: 'outC' },{
    data: { source: 'innerC',target: 'outE' },{
    data: { source: 'innerD',target: 'outG' },],layout: {
    name: 'concentric',concentric: function( node ){
      return node.data("level");
    },minNodeSpacing: 50
  }  
});

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

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

<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>

如何创建具有cytoscape同心布局的图层

bianweiby 回答：如何创建具有cytoscape同心布局的图层

大家都在问