React 中的 Cytoscape JS:[=第 10 种布局
CytoscapeJS in React: run the layout
我有 cytoscape 在使用 plotly 的 cytoscape 进行反应,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}
/>
然而节点在渲染时保留其默认位置。我还没有太多时间来处理 React。是否缺少一个简单的步骤来使此图形使用布局进行渲染?
您需要导入另一个库。这样:
// 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.
我有 cytoscape 在使用 plotly 的 cytoscape 进行反应,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}
/>
然而节点在渲染时保留其默认位置。我还没有太多时间来处理 React。是否缺少一个简单的步骤来使此图形使用布局进行渲染?
您需要导入另一个库。这样:
// 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.