Search code examples
javascriptinitializationcytoscape.js

Positioning nodes from initialization

I am trying to use CytoscapeJS to render a JSON I format from an ajax call. I pass the JSON to the CY initialization. That being said I have the layout as 'preset'. I can't seem to figure out how to get my Nodes to render at the position I have given them.

I have tried using positioning passing an x and a y value.

var cy = cytoscape({
        container: document.getElementById('cy'),
        // initial viewport state:
        zoom: 1.5,
        pan: { x: 0, y: 0 },
        headless: false,
        styleEnabled: true,
        hideEdgesOnViewport: false,
        hideLabelsOnViewport: false,
        textureOnViewport: false,
        motionBlur: false,
        motionBlurOpacity: 0.2,
        wheelSensitivity: .2,
        pixelRatio: 'auto',
        layout: {name: 'preset'},
        //nodes edges and styles
        elements: graphJSON,
        style: styleEdgeNodeColor
    });

The graph JSON is formatted as follows: 

[{"data":{"id":"HMATestPlan_V20190701", "name":"HMATestPlan:0/10" ,"position":{"x":"0", "y":"0"}}},{"data":{"id":"AdminAddMix_V20190701", "name":"AdminAddMix:11/10" ,"position":{"x":"50", "y":"50"}}}]

I like to have the initial position to these values. Where am I going wrong?

Solution

  • Turns out I needed to initialize in document ready and cy.add([data]) after.