साइटोसस्केप और रीएक्टजेएस एकीकरण

Question

मैं रीक्टजेएस के साथ साइटोस्केप का उपयोग करने की कोशिश कर रहा हूं और कुछ सरल घटक में कुछ भी प्रदर्शित नहीं हो रहा है, मैं कोशिश कर रहा हूं।

यहां कोड है। मैं mapStateToProps में एक खाली ऑब्जेक्ट लौट रहा हूं क्योंकि मैं एक स्थिर ग्राफ प्रदर्शित करने की कोशिश कर रहा हूं जहां मैंने किनारों और नोड्स को कड़ी मेहनत की है।

Cytoscape संस्करण मैं उपयोग कर रहा हूँ मेरी package.json से है

"cytoscape": "^ 2.7.6", "प्रतिक्रिया": "^ 15.2.1",

यहाँ Cyctoscape है 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