1

如何在 cytoscape.js 中使用 dagre 布局来绘制一棵简单的树。我正在放置 layout{ name: 'dagre'} 并添加了 dagre.js 但不起作用。使用 arbor.js 它可以工作，但我想使用 dagre 查看树结果。我是 javascript 的新手。非常感谢和对不起我的英语！我的代码：

    <!DOCTYPE html>
<!--

-->
<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="[An example of getting started with Cytoscape.js]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
  <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
  <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/arbor.js"></script>
  <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/springy.js"></script>
  <script src="C:/Users/USER/Downloads/dagre.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;
}
</style>
</head>
<body>
  <div id="cy"></div>
<script id="jsbin-javascript">
var options = {
  name: 'dagre',

  // dagre algo options, uses default value on undefined
  nodeSep: undefined, // the separation between adjacent nodes in the same rank
  edgeSep: undefined, // the separation between adjacent edges in the same rank
  rankSep: undefined, // the separation between adjacent nodes in the same rank
  rankDir: undefined, // 'TB' for top to bottom flow, 'LR' for left to right
  minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
  edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges

  // general layout options
  fit: true, // whether to fit to viewport
  padding: 30, // fit padding
  animate: false, // whether to transition the node positions
  animationDuration: 500, // duration of animation in ms if enabled
  boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
  ready: function(){}, // on layoutready
  stop: function(){} // on layoutstop
};

$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'content': 'data(name)',
        'text-valign': 'center',
        'color': 'white',
        'text-outline-width': 2,
        'text-outline-color': '#888'
      })
    .selector('edge')
      .css({
        'target-arrow-shape': 'triangle'
      })
    .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:'job.000.174.479.001.sh', name: '479' } },
{ data: { id:'job.000.174.822.001.sh', name: '822' } },
..............
] ,
edges: [
{ data: { source: 'DUM_DWH_000_VANTIVE', target: 'job.000.174.773.001.sh' } },
{ data: { source: 'job.000.174.800.001.sh', target: 'job.000.174.806.001.sh' } },
............
    ]
  },

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

    // giddy up...

    cy.elements().unselectify();
    cy.layout( options );

    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>
</body>
</html>
4

1 回答 1

-1

(1) 您不应该从本地驱动器中引用您的 JS 文件。使用http://或https://URL。

(2) 你没有指定'dagre'在初始化时运行。设置layout: { ... }。

于 2015-06-15T13:57:55.083 回答