I want to put the json data in cytoscape.js on the cytoscape software

[sandlakecloudstack1]

first,it isn't a bug , I want to put the json data in cytoscape.js on the cytoscape software(3.8.2), but i don't konw what should I prepare. The layout I used on cytoscape.js is'cose',like this: layout: { name: 'cose', idealEdgeLength: 30, fit: true, nodeOverlap: 110, }, my data.json liak this : { "elements": { "nodes": [{ "data": { "id": "SP3", "score": 0.094 }, "selectable": "true", "group": "nodes" }, { "data": { "id": "SP2", "score": 0.094 }, "selectable": "true", "group": "nodes" }, { "data": { "id": "KLF16", "score": 0.094 }, "selectable": "true", "group": "nodes" },... "edges": [{ "data": { "source": "SP2", "target": "CLOCK", "weight": "1" }, "group": "edges" }, { "data": { "source": "SP2", "target": "MNT", "weight": "1" }, "group": "edges" }, { "data": { "source": "SP2", "target": "CREB1", "weight": "1" }, "group": "edges" },

When I put the data.json data on the cytoscape software(3.8.2), it shows that all the nodes are gathered together. I know it is because there is no'position' information in data.json, but I use the'cose' layout on cytoscape.js There is no need for'position' when rendering the image, so this confuses me. Should I add'position' to the nodes on the data.json? This is my first question

second question: I saw this prompt on the cytoscape official website:Export network and table to Cytoscape.js feature in Cytoscape creates a JSON file WITHOUT style. This means that you need to export the style in a separate JSON file if you apply style to your network. Please read the Style section for more details. But I failed, I did not find the relevant guidance document . I know my problem is a bit troublesome, but my hair is about to fall out because it can’t solve the problem. (╯﹏╰)(╯﹏╰)(╯﹏╰)

[simonwuelker]

I have personally never used the non-js version of Cytoscape but i think i might still be able to help you. If you are trying to export a graph from Cytoscape.js to Cytoscape you should use cy.json() to get the json data, it will include the node positions. Your data.json does not include any information about the graph layout.

As for your second question, I think this might be what you are looking for: Export Styles to Cytoscape.js

[sandlakecloudstack1]

Hello,think u for your help, I have tried to use the cy.json function, but there is a situation that I don't understand. When I use the'cose'layout, the property'position' in the generated nodes is all 0,{x:0,y:0 },
When I don’t use'cose', the image shows n*n points. These points are neatly arranged into a square, and these points have the attribute of'position'. I don’t know why. It’s because of me. Is the reason for using the'cose' layout?

[simonwuelker]

Can you provide some example code? I made this JS Bin to demonstrate things and everything works fine, all nodes have the correct position attribute, it does not matter which layout you use.

[sandlakecloudstack1]

I tried to use my data on the jsBin you provided, and I found the reason. If I write the code like this; layout: {name:"cose"}, position: {x:0,y:0} will appear If I follow your method: layout: "cose", the value of position will not be 0.

var cy = cytoscape({ container: document.getElementById(id), layout: { // name: 'concentric', name: 'cose', idealEdgeLength: 30, fit: true, nodeOverlap: 150, }, style: [{ selector: 'nodes', style: { 'label': 'data(id)', 'text-valign': 'center', 'text-halign': 'center', 'color': '#000000', 'background-color': 'mapData(score, 0, 0.1, #FFFFFF, rgb(154,201,249))', 'width': "mapData(score, 0, 0.1, 0.3, 10)", 'height': "mapData(score, 0, 0.1, 0.3, 10)", 'font-size': 'mapData(score, 0, 0.1, 2.3, 3.7)', "overlay-padding": "1px", 'border-width': 'mapData(score, 0, 0.1, 0.02, 0.2)', 'border-color': '#003366', 'opacity': 0.8, 'z-index': 1, 'includeOverlays': 'false' } }, { selector: 'edges', style: { 'width': 0.2, 'line-color': '#CCCCCC', 'opacity': 0.2 } }, ], elements: { nodes: nodes, edges: edges, } });

I originally wanted to provide you with nodes and edges data, but I couldn't provide it because of confidentiality. In addition, I tried to use cy.png() and cy.jpg() to export images today, but I failed. The image that came out was completely different from the image on the canvas,It's like a target for archery, one ring is surrounded by another ring...Below is the relevant code.: const options = { "full": true, "bg": "white", "scale": 40 } const image = cy.jpg(options); document.querySelector('#png-eg').setAttribute('src', image); thank you again! I wish you success at work and good health.

[simonwuelker]

Sorry, my mistake. Initialising the graph with layout: "cose" is wrong and should be layout: "{name: "cose"}, otherwise the cose layout isn't actually being used.

[sandlakecloudstack1]

So, if you use layout: "{name: "cose"}, there will be no position, right? I don’t use the cy.json() function anymore. I can’t import the cytoscape.js data style into Cytoscape desktop, I try Use cy.png() to convert an image to a PNG image, but the result is not good. Below I plan to convert canvas to PNG, so I want to ask you, is this method also used inside the cy.png() function? Sorry to bother you for so long

[sandlakecloudstack1]

Also, I tried to use the cy.png () function today. I found that if I use 'cose'layout, the image that appears is like a arrow target, and Nodes's id is crowded together. Do not use 'cose'layout, the image coming out is exactly the same as the image above the canvas.I think it may be because of the use of' cose'layout, all points are generated 0.

[simonwuelker]

I think cy.json() outputs false positions because cose is an asynchronous layout and it needs to finish running before the positions can be read. This can be seen here where I wait for the layoutstop event before calling cy.json(), which results in the correct positions. I'm not sure about that though.

It's like a target for archery, one ring is surrounded by another ring

the image that appears is like a arrow target

Like the concentric layout?

(also one really small thing: you can make multiline-codeblocks using `` around your code instead of, its kind of hard to read the code you provided above)

[sandlakecloudstack1]

very sorry,the image that appears is like a arrow target Like this picture:

Actually correct picture:

[simonwuelker]

Ah so all the nodes have the same position. Does that still occur if you wait for layoutstop before calling cy.png()?

[stale[bot]]

This issue has been automatically marked as stale, because it has not had activity within the past 14 days. It will be closed if no further activity occurs within the next 7 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.