使用Cytoscape JS的星形布局

时间:2013-09-25 06:08:00

标签: javascript

我正在尝试使用Cystoscape(http://cytoscape.github.io/cytoscape.js/)来创建星形布局。我能够获得所有节点并相应地关联它们。我无法做的是使中心节点出现在中心,而其他节点以星座方​​式出现。

Star Layout

        $('#cy').cytoscape({
        elements: [
            { // node n1
            group: 'nodes', // 'nodes' for a node, 'edges' for an edge
        data: { // element data (put dev data here)
            id: 'n1', // mandatory for each element, assigned automatically on undefined
            parent: 'nparent', // indicates the compound node parent id; not defined => no parent
            },

            position: { // the model position of the node (optional on init, mandatory after)
            x: 100,
            y: 100
            },

            selected: false, // whether the element is selected (default false)
            selectable: true, // whether the selection state is mutable (default true)
            locked: false, // when locked a node's position is immutable (default false)

            grabbable: true, // whether the node can be grabbed and moved by the user

            classes: 'foo bar' // a space separated list of class names that the element has
            },

         { // node n2
            group: 'nodes',
            data: { id: 'n2' },
            renderedPosition: { x: 200, y: 200 } // can alternatively specify position in rendered on-screen pixels
            },

            { // node n3
            group: 'nodes',
            data: { id: 'n3', parent: 'nparent' },
            position: { x: 123, y: 234 }
            },

            { // node nparent
            group: 'nodes',
            data: { id: 'nparent' }
            },

            { // edge e1
            group: 'edges',
            data: {
                id: 'e1',
            source: 'n1', // the source node id (edge comes from this node)
                target: 'n2'  // the target node id (edge goes to this node)
            }
            }
        ],

        // so we can see the ids
        style: cytoscape.stylesheet().
            selector('node')
            .css({
             'content': 'data(id)'
             })

        });

我面临的其他问题是添加新节点的能力。作为这个图书馆的新手,我将不胜感激。

1 个答案:

答案 0 :(得分:0)

查看链接http://cytoscape.github.io/cytoscape.js/#style/properties 并改变节点属性" shape"到"明星"如下。它会自动将拓扑更改为星形。然后,您不需要指定每个节点的位置x,y。它会自动出现在中心

  

形状:星