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 = {

        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

    };