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

磁石4000

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,什么也没有发生。

Maxkfranz

注册API很好。您所依赖的私有对象不可访问:

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

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

使用适当的调试器,例如在Chrome中当您引用不存在的对象或导致异常时,调试器应向您显示一条错误消息。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

如何在cytoscape.js中给边缘弯曲?

来自分类Dev

Magento 2:如何在 CMS 页面中的正文标记结束之前添加自定义 js 文件

来自分类Dev

如何在Cytoscape.js中的指定位置添加节点?

来自分类Dev

如何在CYTOSCAPE JS中突出显示两个节点之间的路径

来自分类Dev

如何在cytoscape.js中的节点外部使用背景图片

来自分类Dev

如何在单击按钮时显示cytoscape.js中的所有qtips

来自分类Dev

如何将自定义插件添加到CKEditor 5版本?

来自分类Dev

如何在Rails 6中包含自定义JS(特别是AOS.js)

来自分类Dev

如何在Yii2中使用自定义的CSS文件进行模块布局

来自分类Dev

如何在cytoscape中打开.cns文件

来自分类Dev

如何在Doughnutchart ng2 chart.js中自定义百分比标签

来自分类Dev

如何在PhalconPHP 2.x中放置自定义js代码?

来自分类Dev

如何在Node.JS中向响应对象添加自定义函数

来自分类Dev

HERE Map UI JS-如何在地图UI中添加自定义按钮?

来自分类Dev

如何在React SPA中实现添加自定义js代码段功能?

来自分类Dev

如何在nativescript中从js注入自定义组件?

来自分类Dev

如何在PlayWright中运行自定义js函数

来自分类Dev

如何在angular js中实现自定义指令?

来自分类Dev

如何在magento2中向运输方法添加自定义属性

来自分类Dev

如何在Yii2表单字段中为标签添加自定义类?

来自分类Dev

如何在cellforrow中添加2个不同的自定义单元格?

来自分类Dev

如何在ionic2中添加新的自定义字体图标

来自分类Dev

如何在Yii 2验证错误消息中添加自定义链接?

来自分类Dev

如何在Angular2清晰度图标中添加自定义图标?

来自分类Dev

如何在swift2中将分钟添加到自定义时间

来自分类Dev

如何在magento 2的产品编辑表单的“可自定义选项”中添加新字段?

来自分类Dev

Cytoscape.js如何手动停止布局处理

来自分类Dev

如何在Tensorflow 2中解码示例(从1.12版本移植)

Related 相关文章

  1. 1

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

  2. 2

    如何在cytoscape.js中给边缘弯曲?

  3. 3

    Magento 2:如何在 CMS 页面中的正文标记结束之前添加自定义 js 文件

  4. 4

    如何在Cytoscape.js中的指定位置添加节点?

  5. 5

    如何在CYTOSCAPE JS中突出显示两个节点之间的路径

  6. 6

    如何在cytoscape.js中的节点外部使用背景图片

  7. 7

    如何在单击按钮时显示cytoscape.js中的所有qtips

  8. 8

    如何将自定义插件添加到CKEditor 5版本?

  9. 9

    如何在Rails 6中包含自定义JS(特别是AOS.js)

  10. 10

    如何在Yii2中使用自定义的CSS文件进行模块布局

  11. 11

    如何在cytoscape中打开.cns文件

  12. 12

    如何在Doughnutchart ng2 chart.js中自定义百分比标签

  13. 13

    如何在PhalconPHP 2.x中放置自定义js代码?

  14. 14

    如何在Node.JS中向响应对象添加自定义函数

  15. 15

    HERE Map UI JS-如何在地图UI中添加自定义按钮?

  16. 16

    如何在React SPA中实现添加自定义js代码段功能?

  17. 17

    如何在nativescript中从js注入自定义组件?

  18. 18

    如何在PlayWright中运行自定义js函数

  19. 19

    如何在angular js中实现自定义指令?

  20. 20

    如何在magento2中向运输方法添加自定义属性

  21. 21

    如何在Yii2表单字段中为标签添加自定义类?

  22. 22

    如何在cellforrow中添加2个不同的自定义单元格?

  23. 23

    如何在ionic2中添加新的自定义字体图标

  24. 24

    如何在Yii 2验证错误消息中添加自定义链接?

  25. 25

    如何在Angular2清晰度图标中添加自定义图标?

  26. 26

    如何在swift2中将分钟添加到自定义时间

  27. 27

    如何在magento 2的产品编辑表单的“可自定义选项”中添加新字段?

  28. 28

    Cytoscape.js如何手动停止布局处理

  29. 29

    如何在Tensorflow 2中解码示例(从1.12版本移植)

热门标签

归档