Question

我正在尝试使用Cytoscape和ReactJS以及在我尝试的简单组件中没有显示任何内容。

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

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

“cytoscape”：“^ 2.7.6”， “反应”：“^ 15.2.1”，

这是我用于我的样本的Cyctoscape jsbin。

感谢任何帮助。

由于

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

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

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

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

Answer 2

我不得不将cytoscape.js与反应结合起来，但没有减少，所以写了一个要点，以防任何其他人需要它。

code example

Answer 3

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

由于

Cytoscape和ReactJS集成

3 个答案: