javascript - 带有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>


    );
  }
}

最佳答案

我已经解决了问题。 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
    };