React 中的 CytoscapeJS：运行布局

Question

I have cytoscape in react using plotly's cytoscape for react, here .

I have performed the following steps:

// import and register the layouts
import Cytoscape from 'cytoscape';  
import COSEBilkent from 'cytoscape-cose-bilkent'; 

Cytoscape.use(COSEBilkent);  

And I am rendering my graph inside the component (elements are properly formed):

render() {
...
let elements = ...
const layout = {name:'cose-bilkent'}; 
...
<Cytoscape
elements={elements} 
style={{width:'1635px',height:'1114px'}} 
layout={layout}
/>

And yet the nodes retain their default positions upon rendering. I have not yet had much time to work with react. Is there a simple step that I am missing in order to get this graph to render with a layout?

Answer 1

You need to import another library. Such that:

// import and register the layouts
import Cytoscape from "cytoscape";
import CytoscapeComponent from "react-cytoscapejs";
import COSEBilkent from "cytoscape-cose-bilkent";

Cytoscape.use(COSEBilkent);

And then call the React component:

<CytoscapeComponent /> instead of <Cytoscape /> as you have done.