Cytoscape和ReactJS集成

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 style="{height:'400px';width:'400px'}" 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

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

谢谢