Cytoscape与ReactJS的集成

Question

我尝试在ReactJS中使用Cytoscape，以及在我尝试的简单组件中什么都不显示。

下面是代码。我在mapStateToProps中返回一个空对象，因为我试图显示一个静态图形，其中我对边和节点进行了硬编码。

我正在使用的Cytoscape版本来自我的package.json

"cytoscape"："^2.7.6"，"react"："^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 style="{height:'400px';width:'400px'}" id="cy"/>
            </div>
        )
    }
}

function mapStateToProps(state){
    return {};
}


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

Answer 1

对于那些仍然在寻找如何让发布的代码工作的人-我能够通过修改code，指定其高度和宽度为非零的样式来使其工作。

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

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

Answer 2

我也不得不将cytoscape.js与react集成，但没有redux，所以写了一个要点，以防其他人需要它。

code example

Answer 3

我能够解决这个问题。我错过了图层本身的样式，因此默认高度为0px，宽度为0px。

谢谢