javascript - Layout 的 CystoscapeJs 与 React 的问题

Question

我正在尝试为图形布局使用“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>


    );
  }
}

Answer 1

我已经解决了这个问题。 React Cytoscape 的文档没有告知布局工作需要另一个 Prop 。所以我从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
    };