有没有办法显示从复合节点到 Cytoscape.js 中的子节点的连接

Question

我正在探索 Cytoscape.js 的潜力，想知道是否可以可视化复合节点（父节点）到此节点内子节点的连接。

在下面的示例中，我想显示父节点 'b' 与子节点 'a' 和 'c' 之间的连接，但到目前为止我没有成功。

下面给出了最小的工作示例，可在此处编辑：http://jsbin.com/lelinaduko/3/edit

    elements: {
        nodes: [
          { data: { id: 'a', parent: 'b' } },
          { data: { id: 'c', parent: 'b' } },
          { data: { id: 'd' } },
          { data: { id: 'e' } },
          { data: { id: 'f', parent: 'e' } },
          { data: { id: 'b' } }
        ],
        edges: [
          { data: { id: 'bd', source: 'b', target: 'd' } },
          { data: { id: 'eb', source: 'e', target: 'b' } },
          { data: { id: 'ca', source: 'c', target: 'a' } },
          { data: { id: 'ab', source: 'a', target: 'b' } },
          { data: { id: 'bc', source: 'b', target: 'c' } }

        ]
      },

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2015 by anonymous (http://jsbin.com/lelinaduko/3/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="code.js"></script>
<style id="jsbin-css">
body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

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

#info {
  color: #c88;
  font-size: 1em;
  position: absolute;
  z-index: -1;
  left: 1em;
  top: 1em;
}
</style>
</head>
<body>
<div id="cy"></div>
<script id="jsbin-javascript">
$(function(){ // on dom ready

var cy = cytoscape({
  container: $('#cy')[0],
  
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'color': 'black'
      })
      .selector('$node > node')
      .css({
        'content': 'data(id)',
        'text-valign': 'top',
        'text-halign': 'center',
        'color': 'blue'
      })
    .selector('edge')
      .css({
'target-arrow-shape': 'triangle',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'line-color': 'red',
        'line-style': 'dashed',
        'text-valign': 'top',
        'text-halign': 'center',
        'content': 'data(id)'
      })
    .selector(':selected')
      .css({
        'background-color': '',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }),
  
  elements: {
    nodes: [
      { data: { id: 'a', parent: 'b' } },
      { data: { id: 'c', parent: 'b' } },
      { data: { id: 'd' } },
      { data: { id: 'e' } },
      { data: { id: 'f', parent: 'e' } },
      { data: { id: 'b' } }
    ],
    edges: [
      { data: { id: 'bd', source: 'b', target: 'd' } },
      { data: { id: 'eb', source: 'e', target: 'b' } },
      { data: { id: 'ca', source: 'c', target: 'a' } },
      { data: { id: 'ab', source: 'a', target: 'b' } },
      { data: { id: 'bc', source: 'b', target: 'c' } }
      
    ]
  },
    
  layout: {
    name: 'breadthfirst',
    directed: false,
    avoidOverlap: true,
    padding: 5
  }
});

}); // on dom ready
</script>
</body>
</html>

Answer 1

您似乎发现了一个错误：

https://github.com/cytoscape/cytoscape.js/issues/866

如果您想在新版本发布之前解决此问题，请改用 haystack 边，因为这些边不受影响。

有没有办法显示从复合节点到 Cytoscape.js 中的子节点的连接

Is there a way to show connections from compound nodes to the children in Cytoscape.js

cytoscape.js