Reactcytoscape adds arrowheads to lines

look at the picture:

Code:

import {ReactCytoscape} from "react-cytoscape";
render(){
    ...
    return(
        ...
        {/*  */}
        <div className="insight-Right-chart">
            <ReactCytoscape containerID="cy"
                elements={this.getElements()}
                cyRef={(cy) => { this.cyRef(cy) }}
                cytoscapeOptions={{ wheelSensitivity: 0.1 }}
                layout={{ name: "cola",directed: true,padding: 10 }} />
        </div>
    )
}

question:

1. I am a beginner in cytoscape. Which configuration item should I modify if I want to draw a line with an arrow?
what are the attributes such as 2.cyRef, cytoscapeOptions and layout used for? I can"t find jquery on the official website.

New question:

1. Which attribute controls the display of text on the connection?

React.js cytoscape front-end data-visualization

Mar.13,2021

I'll ask and answer my own questions, which I just found and configured in style. Code directly :

render(){
    return (
        <ReactCytoscape containerID="cy"
        elements={this.getElements()}
        style={this.cyStyle()}
        cyRef={(cy) => { this.cyRef(cy) }}
        cytoscapeOptions={{ wheelSensitivity: 0.1,autounselectify: true,boxSelectionEnabled:         false, }}
        layout={{ name: 'random', }} />
    )
}

    cyStyle=()=>{
        return [
            {
                selector: 'node',
                css: {
                    'text-valign': 'center',
                    'text-halign': 'center'
                }
            },
            {
                selector: 'edge',
                css: {
                    // !!!!!!
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'triangle'
                }
            },
            {
                selector: ':selected',
                css: {
                    'background-color': 'black',
                    'line-color': 'black',
                    'target-arrow-color': 'black',
                    'source-arrow-color': 'black'
                }
            }
        ]
    }

Previous: Js uses functional programming to convert strings into arrays. Every time you submit data, you have to manually refresh the page and cannot modify it on the original page. How to solve this problem?

Next: Vue-router switch pages, hoping that the scroll bar can go back to the top, is there any other way except scrollBehavior,?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e51bc6-4516e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e51bc6-4516e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?