2

我正在尝试让 Cytoscape.js 在 Web 服务器上运行，并且它非常适合以下布局： Random Circle Grid 但不幸的是，当我尝试运行“乔木”（力导向）模型布局时，我的图表仅由一个没有标签的节点组成，而不是我期望的五个节点图。我已经使用 cytoscape.js 默认推荐的确切选项来运行它，并且任何未指定的选项都应该使用 arbor.js 默认值。我不确定是否可能是我的脚本 src 有问题，如果是，我应该导入什么？我已经看到其他几个用户在使用带有 cytoscape.js 的 arbor 时遇到了非常相似的问题，但是这些线程都没有以有用的方式得到解决。

< style>
 #cy {height: 100%;width: 100%;}
< /style>

<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="https://raw.github.com/cytoscape/cytoscape.js/master/build/extensions/cytoscape.layout.arbor.js"></script>

  <div style="height:700px;" name="cy" id="cy"></div>


< script>
  options = {
    name: 'arbor'
};

$('#cy').cytoscape({
  layout: options,
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
    'shape': 'octagon',
    'width': '160',
    'height': '80',
        'text-valign': 'top',
        'text-halign': 'center',
    'font-size': '40',
        'color': 'black',
        'text-outline-width': 2,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'width': '5',
        'target-arrow-shape': 'triangle',
        'source-arrow-shape': 'circle'
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),

  elements: {
    nodes: [
      { data: { id: 'LOC_OS01G10320', name: 'LOC_OS01G10320' } },
{ data: { id: 'LOC_OS02G38090', name: 'LOC_OS02G38090' } },
{ data: { id: 'LOC_OS01G16030', name: 'LOC_OS01G16030' } },
{ data: { id: 'LOC_OS03G15550', name: 'LOC_OS03G15550' } },
{ data: { id: 'LOC_OS03G49800', name: 'LOC_OS03G49800' } },
{ data: { id: 'LOC_OS01G23630', name: 'LOC_OS01G23630' } },
{ data: { id: 'LOC_OS01G32750', name: 'LOC_OS01G32750' } }    ],
    edges: [
      { data: { source: 'LOC_OS01G10320', target: 'LOC_OS02G38090' } },
{ data: { source: 'LOC_OS01G16030', target: 'LOC_OS03G15550' } },
{ data: { source: 'LOC_OS01G16030', target: 'LOC_OS03G49800' } },
{ data: { source: 'LOC_OS01G16030', target: 'LOC_OS03G15550' } },
{ data: { source: 'LOC_OS01G16030', target: 'LOC_OS03G49800' } },
{ data: { source: 'LOC_OS01G23630', target: 'LOC_OS01G32750' } }    ]
  },

  ready: function(){
    document.cy = this;

    // giddy up...

    cy.elements().unselectify();

    cy.on('tap', 'node', function(e){
      var node = e.cyTarget; 
      var neighborhood = node.neighborhood().add(node);

      cy.elements().addClass('faded');
      neighborhood.removeClass('faded');
    });

    cy.on('tap', function(e){
      if( e.cyTarget === cy ){
        cy.elements().removeClass('faded');
      }
    });
  }
});

</script>
4

1 回答 1

2

从文档：

http://cytoscape.github.io/cytoscape.js/#core/visuals/cy.layout

<head>注意：您必须在HTML 文档中引用 Cytoscape.js 中包含的 arbor.js 版本：

<head>
    ...

    <script src="arbor.js"></script>

    ...
</head>

Arbor 会进行一些自动路径查找，因为它使用 Web Worker，因此必须以这种方式包含它。因此，您不能将 arbor.js 与您的其他 JavaScript 文件结合起来——就像您可能会在 webapp 中作为脚本缩小的一部分那样。

于 2013-08-30T01:39:48.180 回答