cytoscape.js 2.6版本如何添加自定义布局

Question

API 文档 (http://js.cytoscape.org/#extensions/api) 说 cytoscape( type, name, extension ) 应该注册一个扩展。它在 v2.4 中有效，但在 v2.6 中不再有效。现在正确的做法是什么？

编辑：这是我做的

;(function($$){ 'use strict';

  var defaults = {
    fit: true, // whether to fit the viewport to the graph
    padding: 30, // the padding on fit
    startAngle: 3/2 * Math.PI, // the position of the first node
    counterclockwise: false, // whether the layout should go counterclockwise/anticlockwise (true) or clockwise (false)
    minNodeSpacing: 10, // min spacing between outside of nodes (used for radius adjustment)
    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
    avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
    height: undefined, // height of layout area (overrides container height)
    width: undefined, // width of layout area (overrides container width)
    concentric: function(node){ // returns numeric value for each node, placing higher nodes in levels towards the centre
      return node.degree();
    },
    levelWidth: function(nodes){ // the variation of concentric values in each level
      return nodes.maxDegree() / 4;
    },
    animate: false, // whether to transition the node positions
    animationDuration: 500, // duration of animation in ms if enabled
    ready: undefined, // callback on layoutready
    stop: undefined // callback on layoutstop
  };

  function ConcentricLayout( options ){
    console.log('INIT');
    this.options = $$.util.extend({}, defaults, options);
  }

  ConcentricLayout.prototype.run = function(){
    console.log('RUNNING');
    // Run code
  };

  $$('layout', 'customconcentric', ConcentricLayout);

})( cytoscape );

以及我如何使用它

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

    boxSelectionEnabled: false,
    autounselectify: true,

    elements: p,

    layout: {
        name: 'null',
        stop: function() {
            cy.elements('node.group').forEach(function( ele ){
                var eles = ele.children();
                eles.layout({
                    name: 'customgrid',
                    fit: false,
                    avoidOverlapPadding: 0,
                    columns: 2
                });
            });
            cy.elements('node.machine').forEach(function( ele ){
                var elesleft = ele.children('node.mod');
                var elesright = ele.children('node.group');
                var descendants = elesright.descendants();
                if (elesleft.length > 0) {
                    var relpos = getRelativePositions(descendants);
                    elesright.forEach(function( ele ){
                        ele.relativePosition('x', 200);
                    });
                    setRelativePositions(relpos, cy);
                    elesleft.layout({
                        name: 'customgrid',
                        fit: false,
                        avoidOverlapPadding: 0,
                        columns: 1
                    });
                }
            });
            cy.elements('node.machine, node.env').layout({
                name: 'customconcentric',
                fit: true
            });
        }
    }

});

对于 2.4.9，我在浏览器的 javascript 控制台中看到了这一点。

cytoscape.layout.custom.js:41 INIT
cytoscape.layout.custom.js:46 RUNNING

对于 2.6.2，没有任何反应。

Answer 1

注册API没问题。您依赖于不可访问的私有对象：

this.options = $$.util.extend({}, defaults, options);

如果您希望代码与较新版本兼容，请仅在文档中引用 public API：http://js.cytoscape.org

使用合适的调试器，like in Chrome。当您引用不存在的对象或以其他方式导致异常时，您的调试器应该会向您显示一条错误消息。

cytoscape.js 2.6版本如何添加自定义布局

How to add custom layout in cytoscape.js 2.6 version

cytoscape.js