带有React的Layout的CystoscapeJs问题

我正在尝试在“图形布局”中使用“ cose”或“ cose-bilkent”,但是当使用“ cose”时,什么也没有发生,并且使用“ cose-bilkent”表示:

“错误:找不到这样的布局cose-bilkent。您忘了导入它并cytoscape.use()吗?”

我确实使用了它,并安装了cose-bilkent的软件包。

import React,{ Component } from 'react';
import api from '../../services/api';

import Cytoscape from 'cytoscape';
import CytoscapeComponent from 'react-cytoscapejs';
import CoseBilkent from 'cytoscape-cose-bilkent';

Cytoscape.use( CoseBilkent );

export default class Demo extends Component {

  state = {
    w: 0,h: 0,elements: [],allBooks: [],allAuthors: [],}

  render() {

    const layout = {
        name: 'cose-bilkent',};

    return(
         <div>
        <CytoscapeComponent
                elements={this.state.elements}
            style={{ width: this.state.w,height: this.state.h }}
                cy={(cy) => {this.cy = cy}}
                layout={layout}
        />
      </div>


    );
  }
}
yaojinzhang 回答:带有React的Layout的CystoscapeJs问题

我已经解决了问题。 React Cytoscape的文档没有告知布局工作需要其他道具。因此,我从Cytoscape官方文档中获得了一个示例。

const layout = {
        name: 'cose',ready: function(){},stop: function(){},animate: true,animationEasing: undefined,animationDuration: undefined,animateFilter: function ( node,i ){ return true; },animationThreshold: 250,refresh: 20,fit: true,padding: 30,boundingBox: undefined,nodeDimensionsIncludeLabels: false,randomize: false,componentSpacing: 40,nodeRepulsion: function( node ){ return 2048; },nodeOverlap: 4,edgeElasticity: function( edge ){ return 32; },nestingFactor: 1.2,gravity: 1,numIter: 1000,initialTemp: 1000,coolingFactor: 0.99,minTemp: 1.0
    };
本文链接:https://www.f2er.com/3018317.html

大家都在问