时间戳

首页 > 解决方案 > 如何在父节点之间创建出租车边缘？

cytoscape.js - 如何在父节点之间创建出租车边缘？

问题描述

我正在尝试使用在两个父节点之间创建一条边'curve-style': 'taxi'。不幸的是，父节点之间的边似乎并没有以直角转动，并且通常非常不规则地路由自己。

window.addEventListener('DOMContentLoaded', function() { // on dom ready

  // photos from flickr with creative commons license

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

    style: cytoscape.stylesheet()
      .selector('node')
      .style({
        'height': 80,
        'width': 80,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': 3,
        'border-opacity': 0.5
      })
      .selector('.eating')
      .style({
        'border-color': 'red'
      })
      .selector('.eater')
      .style({
        'border-width': 9
      })
      .selector('edge')
      .style({
        'width': 6,
        'target-arrow-shape': 'triangle',
        'line-color': '#ffaaaa',
        'target-arrow-color': '#ffaaaa',
        'curve-style': 'taxi'
      })
      .selector('#bird')
      .style({
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
      })
      .selector('#cat')
      .style({
        'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
      })
      .selector('#ladybug')
      .style({
        'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
      })
      .selector('#aphid')
      .style({
        'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
      })
      .selector('#rose')
      .style({
        'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
      })
      .selector('#grasshopper')
      .style({
        'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
      })
      .selector('#plant')
      .style({
        'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
      })
      .selector('#wheat')
      .style({
        'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
      }),

    elements: {
      nodes: [{
          data: {
            id: 'cat',
            parent: 'bird'
          }
        },
        {
          data: {
            id: 'bird'
          }
        },
        {
          data: {
            id: 'ladybug'
          }
        },
        {
          data: {
            id: 'aphid'
          }
        },
        {
          data: {
            id: 'rose'
          }
        },
        {
          data: {
            id: 'grasshopper'
          }
        },
        {
          data: {
            id: 'plant'
          }
        },
        {
          data: {
            id: 'wheat'
          }
        }
      ],
      edges: [{
          data: {
            source: 'cat',
            target: 'bird'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'ladybug'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'grasshopper'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'plant'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'wheat'
          }
        },
        {
          data: {
            source: 'ladybug',
            target: 'aphid'
          }
        },
        {
          data: {
            source: 'aphid',
            target: 'rose'
          }
        }
      ]
    },

    layout: {
      name: 'breadthfirst',
      directed: true
    }
  }); // cy init


}); // on dom ready
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <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">
  <title>Images</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

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

</html>

有没有办法让出租车边缘的行为与非父节点之间的行为相同？

标签： cytoscape.js

解决方案

这是由广度优先布局中的一种奇怪的布局行为引起的。在广度优先中使用复合节点时，布局似乎无法很好地处理内部节点，因此外边缘并不是真正的 bfs 边缘（结合在一起），而是两个单独的 bfs 边缘（不结合）。为了让它'curve-style': 'taxi'工作，我认为有一种简单但愚蠢的方式。不幸的是，父节点之间的边似乎不能以直角转动，所以我们必须在没有子节点的情况下制作 bfs 布局，然后添加它们（这是一个愚蠢的 hack，但如果你保存所有子节点和之后添加它们：

window.addEventListener('DOMContentLoaded', function() { // on dom ready

  // photos from flickr with creative commons license

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

    style: cytoscape.stylesheet()
      .selector('node')
      .style({
        'height': 80,
        'width': 80,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': 3,
        'border-opacity': 0.5
      })
      .selector('.eating')
      .style({
        'border-color': 'red'
      })
      .selector('.eater')
      .style({
        'border-width': 9
      })
      .selector('edge')
      .style({
        "curve-style": "taxi",
        "taxi-direction": "downward",
        "taxi-turn": 20,
        "taxi-turn-min-distance": 5
      })
      .selector('#bird')
      .style({
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
      })
      .selector('#cat')
      .style({
        'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
      })
      .selector('#ladybug')
      .style({
        'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
      })
      .selector('#aphid')
      .style({
        'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
      })
      .selector('#rose')
      .style({
        'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
      })
      .selector('#grasshopper')
      .style({
        'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
      })
      .selector('#plant')
      .style({
        'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
      })
      .selector('#wheat')
      .style({
        'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
      }),

    elements: {
      nodes: [{
          data: {
            id: 'bird'
          }
        },
        {
          data: {
            id: 'ladybug'
          }
        },
        {
          data: {
            id: 'aphid'
          }
        },
        {
          data: {
            id: 'rose'
          }
        },
        {
          data: {
            id: 'grasshopper'
          }
        },
        {
          data: {
            id: 'plant'
          }
        },
        {
          data: {
            id: 'wheat'
          }
        }
      ],
      edges: [{
          data: {
            source: 'bird',
            target: 'ladybug'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'grasshopper'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'plant'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'wheat'
          }
        },
        {
          data: {
            source: 'ladybug',
            target: 'aphid'
          }
        },
        {
          data: {
            source: 'aphid',
            target: 'rose'
          }
        }
      ]
    },
    layout: {
      name: 'breadthfirst',
      directed: true
    }
  }); // cy init

  cy.ready(function() {
    cy.ready(function() {
      cy.add({
        data: {
          id: 'cat',
          parent: 'bird'
        }
      });
    });
  });

}); // on dom ready
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <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">
  <title>Images</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

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

</html>

我在 cytoscape 的 css 部分添加了几行，也是 js 文件末尾的 cy.ready() 部分。

推荐阅读