CytoscapeとReactJSの統合

Question

CytoscapeをReactJSで使用しようとしていますが、単純なコンポーネントに何も表示されていないものがあります。

ここにコードがあります。私は、静的なグラフを表示しようとしているので、私はエッジとノードをハードコーディングしているので、空のオブジェクトをmapStateToPropsに戻しています。 "^ 2.7.6"、 "反応"： "^ 15.2.1"、ここで

がCyctoscapeである私が使用しています

Cytoscapeのバージョンは私のpackage.jsonから

"cytoscape" でありますjsbin私は私のサンプルを使用しています。

enter link description here

任意の助けに感謝。

おかげ

import React,{Component} from 'react'; 
import cytoscape from 'cytoscape'; 

import {connect} from 'react-redux'; 
import { bindActionCreators } from 'redux'; 

class GraphContainer extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.renderCytoscapeElement = this.renderCytoscapeElement.bind(this); 
    } 

    renderCytoscapeElement(){ 

     console.log('* Cytoscape.js is rendering the graph..'); 

     this.cy = cytoscape(
     { 
      container: document.getElementById('cy'), 

      boxSelectionEnabled: false, 
      autounselectify: true, 

      style: cytoscape.stylesheet() 
       .selector('node') 
       .css({ 
        'height': 80, 
        'width': 80, 
        'background-fit': 'cover', 
        'border-color': '#000', 
        'border-width': 3, 
        'border-opacity': 0.5, 
        'content': 'data(name)', 
        'text-valign': 'center', 
       }) 
       .selector('edge') 
       .css({ 
        'width': 6, 
        'target-arrow-shape': 'triangle', 
        'line-color': '#ffaaaa', 
        'target-arrow-color': '#ffaaaa', 
        'curve-style': 'bezier' 
       }) 
       , 
      elements: { 
       nodes: [ 
        { data: { id: 'cat' } }, 
        { data: { id: 'bird' } }, 
        { data: { id: 'ladybug' } }, 
        { data: { id: 'aphid' } }, 
        { data: { id: 'rose' } }, 
        { data: { id: 'grasshopper' } }, 
        { data: { id: 'plant' } }, 
        { data: { id: 'wheat' } } 
       ], 
       edges: [ 
        { data: { source: 'cat', target: 'bird' } }, 
        { data: { source: 'bird', target: 'ladybug' } }, 
        { data: { source: 'bird', target: 'grasshopper' } }, 
        { data: { source: 'grasshopper', target: 'plant' } }, 
        { data: { source: 'grasshopper', target: 'wheat' } }, 
        { data: { source: 'ladybug', target: 'aphid' } }, 
        { data: { source: 'aphid', target: 'rose' } } 
       ] 
      }, 

      layout: { 
       name: 'breadthfirst', 
       directed: true, 
       padding: 10 
      } 
      }); 
    } 

    componentDidMount(){ 
     this.renderCytoscapeElement(); 
    } 

    render(){ 
     return(
      <div className="node_selected"> 
       <div id="cy"/> 
      </div> 
     ) 
    } 
} 

function mapStateToProps(state){ 
    return {}; 
} 


export default connect(mapStateToProps,null)(GraphContainer); 

Answer 1

私は問題を解決できています。私はレイヤー自体のスタイルを見逃していたので、デフォルトで0pxの高さと0pxの幅になっています。まだコードを取得する方法をお探しの方に

おかげ

Answer 2

が働い掲載 - 私はそれが非ゼロの高さと幅とそのスタイルを指定して、CYのDIVを変更することで動作させることができました。

render() { 
    let cyStyle = { 
    height: '1000px', 
    width: '1000px', 
    margin: '20px 0px' 
    }; 

    return (
    <div> 
     <div style={cyStyle} id="cy"/> 
    </div> 
); 
} 

Answer 3

私はcytoscape.jsも反応させる必要がありましたが、reduxはありませんでしたので、他の誰かが必要な場合に備えて要点を書いていました。

code example