亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Layout 的 CystoscapeJs 與 React 的問題

Layout 的 CystoscapeJs 與 React 的問題

慕絲7291255 2022-01-13 17:34:13
我正在嘗試將“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>    );  }}
查看完整描述

1 回答

?
繁星coding

TA貢獻1797條經驗 獲得超4個贊

我已經解決了這個問題。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

    };


查看完整回答
反對 回復 2022-01-13
  • 1 回答
  • 0 關注
  • 235 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號