鍍金池/ 問答/數(shù)據(jù)分析&挖掘  網(wǎng)絡(luò)安全  HTML/ Reactcytoscape給直線添加箭頭

Reactcytoscape給直線添加箭頭

看圖：
圖片描述
代碼：

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的初學(xué)者，請問想畫出帶箭頭的線應(yīng)該修改那個(gè)配置項(xiàng)？
  • 2.cyRef、cytoscapeOptions、layout這些屬性都是做什么用的，官網(wǎng)是jquery版的我沒找到..

新問題：

  • 1.連線上的文字顯示是哪個(gè)屬性控制的？？
回答
編輯回答
膽怯

還是我自問自答吧，也是我剛找到的,在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'
                }
            }
        ]
    }
2017年4月13日 23:18