Adjust the node's location in Cytoscape.js

I recently switched from using Cola to fCose in Cytoscape.js for graphing multiple graphs with no connections.

With Cola, I was able to manually set node positions by tweaking the layout options. However, with fCose, despite adjusting variables like quality, randomize, and animate, passing coordinates of nodes seems to have no effect on the final rendering.

In the fCose defaults, I tried setting quality to "proof" and randomize/animate to false, but it didn't help. Even adding positions: undefined did not change the node positioning. How can I achieve manual node positioning with fCose?

javascript cytoscape.js

Answer №1

When utilizing fCoSE, the option to randomize the positions of nodes can be set to true or false. If set to true, nodes will be initially placed in random positions before the algorithm attempts to find an optimal layout for the graph.

If randomize is set to false, the algorithm will begin from the current positions of the nodes. The current positions refer to the position attribute found in each cytoscape node. To start the layout from specific desired positions, it is necessary to assign those positions to nodes using node.position() or nodes.positions() and then initiate the layout with randomize set to false. Otherwise, the layout does not directly support setting initial positions.

Answer №2

I managed to overcome the issue using cytoscape js and leveraging the 'preset' layout options.

If you prefer to define node positions manually in your elements JSON, you can opt for the preset layout — by default, it does not alter any positions, keeping your nodes in their current locations (as specified in options.elements during initialization).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to simulate a minified module for testing purposes?

For my project, I developed a component intended to function as a module. The implementation involves the utilization of third-party code provided in the form of a config file (initOpinionLab.js) and a .min.js file (opinionlab.min.js). As part of the devel ...

javascript vue.js jestjs vue-test-utils

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

javascript html google-chrome

Struggling to properly interpret the unrefined data from Typeform's webhook

Utilizing the webhook feature of Typeform to convert results to JSON when a user submits the embedded survey is working perfectly when tested with RequestBin. However, after exposing my local app using ngrok with the command ngrok http 3000 and setting t ...

javascript express post webhooks body-parser

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?

Looking for assistance with my vertical carousel project. Is there a way to create a vertical carousel in bootstrap 5 with the previous image fixed? I found a slider on this website: zara.com/jp/en/ I want to maintain the previous image in a fixed posit ...

javascript html css bootstrap-5

What are some tips for integrating Bluebird into Angular frameworks?

I attempted to integrate Angular with Bluebird promises: Here is the HTML code snippet: <body ng-app="HelloApp"> <div ng-controller="HomeController">{{name}} {{also}}</div> </body> The corresponding JavaScr ...

javascript angularjs promise bluebird angular-promise

Exploring Vue.js: Leveraging v-bind for multiple classes in Vue.js applications

Can someone assist me in figuring out how to apply multiple options to v-bind:class? In my Uno game, I need to determine the text color of cards based on their color property stored as a list of objects like this: ([{ Color: green, Value: 6}]. Here is my ...

javascript html vue.js vuejs2 vue-component

Personalized JQuery popup before leaving the page

Looking to display a unique jQuery dialog box with options for Yes, No, and Cancel when a user attempts to navigate away from the current page or close the window. The default browser dialog confirmation is displayed on the beforeload event, but we are tr ...

javascript jquery onbeforeunload window.onunload

What causes the error message 'avoid pushing route with duplicate key' when using NavigationStateUtils in React Native?

Within my React Native + Redux project, I have set up a reducer for navigation utilizing NavigationStateUtils: import { PUSH_ROUTE, POP_ROUTE } from '../Constants/ActionTypes' import { NavigationExperimental } from 'react-native' impo ...

javascript react-native redux reactjs

"Encountering a mysterious internal server error 500 in Express JS without any apparent issues in

My express.js routes keep giving me an internal server error 500, and I have tried to console log the variables but nothing is showing up. Here are the express routes: submitStar() { this.app.post("/submitstar", async (req, res) => { ...

javascript node.js express blockchain

While attempting to scrape data, the console.log function displays the information, however it is not being returned

This code is now working perfectly! However, I am struggling to organize the data into an array of separate objects. getGAS: function(url) { var self=this; rp(options) .then(($) => { let gasset = []; $('.stations-list').each(functio ...

javascript html node.js axios cheerio

The React-native application initialized using npx create-react-app encountered an error and could not launch

Hello there, A couple of months back, I developed an app using create-react-app. However, when I tried to run it with npm start, I encountered the following error message: react-scripts start It seems like there's an issue with the project depende ...

javascript node.js reactjs npm webpack

What are some solutions for resolving JavaScript's 'undefined' error?

javascript html undefined

Console warning in Next.js: "The 'style' property did not match."

Currently working on a website with Next.js, I've encountered a red color warning in the console related to the Image component from 'next/Image'. Unsure of the reason for this warning, I'm seeking to resolve it to ensure the project&ap ...

javascript reactjs next.js

Disabling the search function when it is clicked (before any actions are taken)

I've recently implemented a search form on my website, where the search field opens up upon clicking the search icon.https://i.stack.imgur.com/UeErx.png To make the search icon clickable, I disabled the search function. var $searchBtn = $search.find ...

javascript jquery

VueJs does not display the source code of components for users

I've recently delved into working with vueJS2 and am currently learning about components. I have a question for the experts in this field. As far as I understand, VueJS processes HTML using JavaScript, which is why the rest of the HTML code may not b ...