React中的CytoscapeJS:运行布局

时间:2019-02-13 23:24:04

标签: javascript html reactjs cytoscape.js

我的反应中使用了细胞密度,而使用了plotly的反应性here

我已经执行了以下步骤:

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

Cytoscape.use(COSEBilkent);  

我正在将图形绘制在组件内部(元素的格式正确):

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

然而,节点在渲染时仍保留其默认位置。我还没有太多时间来应对。我缺少一个简单的步骤来使该图以布局呈现吗?

1 个答案:

答案 0 :(得分:0)

您需要导入另一个库。这样:

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

Cytoscape.use(COSEBilkent);

然后调用React组件:

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