Is there a way to flip a bezier curve in cytoscape.js?

I am attempting to create edges similar to the following static mock:

static representation of desired edges/curves

https://i.sstatic.net/uUTdI.png

While I can generate "S" shaped curves, I would like them to invert when moving downward from the root node as shown in the image. I have not found any information in the documentation that addresses how to achieve this.

You can view my demo here: https://codesandbox.io/s/l5m6mnlqrz

Another potential solution could be to smoothen out the 90-degree curve using a "taxi" curve style, but it appears that this is not currently possible.

I welcome any suggestions. Thank you.

javascriptbeziercytoscape.js

Answer №1

Creating the desired form using a single Bezier curve is not possible, as the central range needs to be vertical. However, using two conjugated curves may yield the appropriate result.

Considering points A (on the left) and B (position relative to A being irrelevant):

The first curve starts at P0=(XA, YA) and ends at P3=((XA + XB)/2, ((YA + YB)/2)

The first control point should be horizontally aligned with the starting point, while the second one should align vertically with the ending point

X1, Y1 = X0 + DX, Y0
X2, Y2 = X3, Y3 - DY

The parameters DX and DY determine the curvature of the right angle. Start by setting them as DX = (X3 - X0) / 3 and DY = (Y3 - X0) / 3, then adjust the denominators to achieve the desired curve form

The second part consists of a mirrored curve with the following points:

(X3, Y3), (X3, Y3 + DY), (XB - DX, YB), (XB, YB)

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

Searching for values using keys in Angular

Currently, I am working on a project using Angular where I need to store information based on specific identifiers. To display this information in the Angular application, I am pulling data for different identifiers and showing it on the screen. At the mo ...

javascriptarraysangularjs

Fill every empty element with elements from another array

I'm struggling to grasp the concept of arrays. I have two arrays and I want to replace the null elements in one with the elements from the other. Here is what I have currently: var arr1 = [1,2,3,4] var arr2 = [null, 99, null, null] arr2.map((item) = ...

javascriptarrays

Scraping a few URLs with Javascript for Web Data Extraction

I'm struggling to retrieve data from multiple URLs and write it to a CSV file. The problem I'm facing is that the fetched data is not complete (I expect 10 items) and it's not in the correct order. Instead of getting 1, 2, 3 sequentially, I ...

javascriptweb-scrapingrequestcheerio

Modifying the position of a component in the UI tree to reset its state in ReactJs

According to React, the state will be maintained as long as the same component is rendered at the same position. In this scenario, I have two Counter components rendering. By toggling a checkbox, I am able to control the visibility of the first Counter co ...

javascriptreactjsstate

Display only the relevant search results using ng-show in AngularJS

By utilizing the code below, I am able to filter results where all entries are displayed on the page: <body ng-app=""> <div ng-init="friends = [{name:'John', phone:'555-1276'}, {name: ...

javascriptangularjsangularjs-ng-repeatng-show

What is the method for displaying data from a JSON file that is associated with the wallet address of the authenticated user in next.js?

I am currently working on a claim page using next.js, where logged in Metamask addresses can perform the following tasks: Access data from a local .json file to check eligibility for claiming an item and display the claim page. Submitting a form to update ...

javascriptjsonnext.jsweb3js

The output from the Compute function is not showing up in the TextBox as expected

I'm currently working on an HTML page that contains two textboxes and a button. I've created a Compute function to display the result in one of the textboxes, but unfortunately, it's not functioning as expected. No alerts are appearing on th ...

javascripthtml

What is the best way to link my React application with my Express API?

I've been immersed in my react app project for a while now, and I've recently delved into developing a server (using node and express) as well as planning to incorporate a database for it (MongoDB). My client-side react app has been smoothly run ...

javascriptreactjsexpress

Transmitting client-side Javascript data to backend server using Express

I am trying to fetch data from my frontend using the DOM and send it to the backend through Express but I'm unsure of how to proceed. I have used a POST method to console.log the data, but now I need help retrieving it in my Express backend. (The cons ...

javascriptnode.jsexpress

Error message indicating an issue with defaultProps on a React FunctionComponent in Typescript

Looking at this React Functional Component: import React, { memo } from 'react'; interface Options { buttonType?: JSX.IntrinsicElements['button']['type']; text: string; }; const defaultSettings = { buttonType: 'b ...

javascriptreactjstypescript

Is my JavaScript coding accurate?

I'm working on extracting JSON data from my Rest API to display in my application. I'm wondering if the function renderUserState is being called, as the rest of my code seems to be functioning correctly. function testSubmit() { var card = ge ...

javascriptjsonajaxapi

What should I do to meet jQuery's requirement when faced with the error message "Cannot read property ... of undefined" in version 1.11.0?

My attempt to load jQuery 1.9.1 un-minified from CDN resulted in an error message: "Uncaught TypeError: Cannot call method 'call' of undefined jquery-1.9.1.js:648". After updating the reference to minified version, a similar error occurred: Unca ...

javascriptjquery

The error message "ERR_CONNECTION_TIMED_OUT when trying to access Google APIs fonts

Upon deploying my web project on the client server, I encountered an error and noticed slow page loading. GET https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic net::ERR_CONNECTION_TIMED_OUT The browser ...

javascriptjquerycss

At what precise moment does the ng-checked function get executed?

When utilizing AngularMaterial, I have implemented ng-checked in the following manner: <md-list> <md-list-item ng-repeat="option in options"> <p> {{ option }} </p> <md-checkbox class="md-secondary" aria-label=" ...

javascriptangularjscheckboxangular-material

What is the process for retrieving DOM elements and JavaScript variables using PHP?

I am currently developing a PHP script that will dynamically generate tables in MySQL based on the user's input for the number of columns and column names. However, I have encountered some challenges when trying to access DOM elements and JavaScript v ...

javascriptphpmysql

Node.Js powers a multilingual blogging experience like no other!

Greetings! I have built my entire site using Node.JS and I am currently working on developing a blog for it. I am planning to have the blog available in English, Spanish, and Portuguese languages. The technologies I am using include node.js, mongodb, expr ...

javascriptnode.jsreactjsmongodbexpress

Tips for maintaining interactivity after a page refresh

$(document).ready(function () { $("#2").click(function () { $("#content").load("{% url 'about' %}"); }); $("#3").click(function () { $("#content").load("{% url ...

javascripthtmljqueryjquery-uijquery-plugins

Struggling to make Tumblr Javascript function properly

I have integrated the following code snippet: <script type="text/javascript" src="http://underlineent.tumblr.com/api/read/json"> </script> Unfortunately, my Tumblr blog is not appearing on this site. Can anyone provide assistance? The provid ...

javascripthtmljsontumblr

Unable to add a string to a http get request in Angular

When a specific ID is typed into the input field, it will be saved as searchText: <form class="input-group" ng-submit="getMainData()"> <input type="text" class="form-control" ng-model="searchText" placeholder=" Type KvK-nummer and Press Enter" ...

javascriptangularjshttpparametersroutes

Iterate through an Array of Objects and exhibit a single object property in HTML one at a time by utilizing Javascript

I am working with an array of objects that contain two properties: "quote" and "author". I have a container div where I want the quotes to be displayed one by one at an interval of every 2 seconds. Currently, it is showing one letter at a time instead of d ...

javascripthtmlarraysjson