Reactcytoscape给直线添加箭头

Question

看图：

代码：

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>
    )
}

问题：

• 1.我是cytoscape的初学者，请问想画出带箭头的线应该修改那个配置项？
• 2.cyRef、cytoscapeOptions、layout这些属性都是做什么用的，官网是jquery版的我没找到..

新问题：

• 1.连线上的文字显示是哪个属性控制的？？

Answer 1

还是我自问自答吧，也是我刚找到的,在style中配置。直接上代码：

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'
                }
            }
        ]
    }