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 的文档没有告知布局工作需要其他道具。所以我从 Cytoscape 官方文档中得到了一个例子。const layout = {&nbsp; &nbsp; &nbsp; &nbsp; name: 'cose',&nbsp; &nbsp; &nbsp; &nbsp; ready: function(){},&nbsp; &nbsp; &nbsp; &nbsp; stop: function(){},&nbsp; &nbsp; &nbsp; &nbsp; animate: true,&nbsp; &nbsp; &nbsp; &nbsp; animationEasing: undefined,&nbsp; &nbsp; &nbsp; &nbsp; animationDuration: undefined,&nbsp; &nbsp; &nbsp; &nbsp; animateFilter: function ( node, i ){ return true; },&nbsp; &nbsp; &nbsp; &nbsp; animationThreshold: 250,&nbsp; &nbsp; &nbsp; &nbsp; refresh: 20,&nbsp; &nbsp; &nbsp; &nbsp; fit: true,&nbsp; &nbsp; &nbsp; &nbsp; padding: 30,&nbsp; &nbsp; &nbsp; &nbsp; boundingBox: undefined,&nbsp; &nbsp; &nbsp; &nbsp; nodeDimensionsIncludeLabels: false,&nbsp; &nbsp; &nbsp; &nbsp; randomize: false,&nbsp; &nbsp; &nbsp; &nbsp; componentSpacing: 40,&nbsp; &nbsp; &nbsp; &nbsp; nodeRepulsion: function( node ){ return 2048; },&nbsp; &nbsp; &nbsp; &nbsp; nodeOverlap: 4,&nbsp; &nbsp; &nbsp; &nbsp; edgeElasticity: function( edge ){ return 32; },&nbsp; &nbsp; &nbsp; &nbsp; nestingFactor: 1.2,&nbsp; &nbsp; &nbsp; &nbsp; gravity: 1,&nbsp; &nbsp; &nbsp; &nbsp; numIter: 1000,&nbsp; &nbsp; &nbsp; &nbsp; initialTemp: 1000,&nbsp; &nbsp; &nbsp; &nbsp; coolingFactor: 0.99,&nbsp; &nbsp; &nbsp; &nbsp; minTemp: 1.0&nbsp; &nbsp; };