javascript - 带有React的Layout的CystoscapeJs问题(Problem with Layout's CystoscapeJs with React)

Question

I'm trying to use the "cose" or "cose-bilkent" for the Graph Layout, but when using "cose", nothing happens and using "cose-bilkent" says:

(我正在尝试对“图形布局”使用“ cose”或“ cose-bilkent”，但是当使用“ cose”时，没有任何反应，并且使用“ cose-bilkent”表示：)

"Error: No such layout cose-bilkent found. Did you forget to import it and cytoscape.use() it?"

(“错误：没有这样的布局cose-bilkent发现你忘了将其导入和。 cytoscape.use()吗？”)

And I did use it, and installed the cose-bilkent's package.

(我确实使用了它，并安装了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>


    );
  }
}

  ask by Jander Silva translate from so

Answer 1

I have solved the problem.

(我已经解决了问题。)

The React Cytoscape's documentation doesn't inform that it was necessary another props for the layout works.

(React Cytoscape的文档没有告知布局工作需要其他道具。)

So I got an example from the Cytoscape official documentation.

(因此，我从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
    };