Set node position in Cytoscape.js

Question

I am using the excellent Cytoscape.js for graphing.

I have previously been using the Cola option for this as it uses force direction.

However I now want to visualize multiple graphs that have no connections and realize that fCose is much better at doing this.

The problem I am now faced with is I am now unable to set node positions when I already have coordinates to do so.

I was able to achive this using Cola by doing the following in the layout options -

    name: 'cola',
    padding: layoutPadding,
    nodeSpacing: 40,
    edgeLengthVal: 20,
    animate: false,              // setting this to false
    randomize: false,            // and this to false allowed me to manually set the node position coordinates
    maxSimulationTime: maxLayoutDuration,
    boundingBox: { 
        x1: 0,
        y1: 0,
        x2: 10000,
        y2: 10000
    },
    edgeLength: function (e) {
        let w = e.data('weight');
        return w;
    }

Also in the defaults of Cola positions is set to undefined, which I assume means that if coordinates are passed in they will be set accordingly.

However my problem is in fCose is, no matter what I do, when passing the coordinates of the nodes in it is having zero affect when rendered.

In the defaults of fCose I see three variables I thought if I altered would have an effect -

    quality: "default",
    // Use random node positions at beginning of layout
    // if this is set to false, then quality option must be "proof"
    randomize: true,
    // Whether or not to animate the layout
    animate: true,

So I set quality to "proof" and both randomize and animate to false.

I also tried adding positions: undefined, however none of the above changes had any affect on the node positioning. How can I achive this with fCose?

Flower

Answer 1

In fCoSE, if randomize is true, nodes are spread to random positions initially and then algorithm tries to find a good layout of the graph.

If randomize is false, algorithm starts from the current positions of the nodes. From current position, I mean the position attribute found in each cytoscape node. If you want to start the layout from the desired positions, first you need to assign those positions to nodes by using node.position() or nodes.positions() and then start the layout with randomize: false. Otherwise, layout currently doesn't accept initial positions directly.

Balcom

As stated I have already tried setting randomize to false and all the nodes have positions coordinate values but still they are not getting set on render. – Flower

Answer 2

I had to solve the same problem with cytoscape js and I achieved it by using the 'preset' layout options.

If you want to specify your node positions yourself in your elements JSON, you >can use the preset layout — by default it does not set any positions, leaving >your nodes in their current positions (i.e. specified in options.elements at >initialisation time).

Schoenburg