Layout 的 CystoscapeJs 与 React 的问题

Question

我正在尝试将 "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 的软件包。

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>


    );
  }
}

Answer 1

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

Layout 的 CystoscapeJs 与 React 的问题

Problem with Layout's CystoscapeJs with React

javascript

graph

cytoscape.js

reactjs