React-Cytoscapejs 使用教程

项目介绍

react-cytoscapejs 是一个 MIT 许可的 React 组件，用于网络（或图论中的图）可视化。该组件渲染一个 Cytoscape 图。大多数属性都是 Cytoscape JSON 格式。

项目快速启动

安装

首先，安装 react-cytoscapejs 和 cytoscape：

npm install react-cytoscapejs cytoscape

基本使用

以下是一个简单的示例，展示如何在 React 应用中使用 react-cytoscapejs：

import React from 'react';
import ReactDOM from 'react-dom';
import CytoscapeComponent from 'react-cytoscapejs';

class MyApp extends React.Component {
  render() {
    const elements = [
      { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },
      { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },
      { data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' } }
    ];

    return <CytoscapeComponent elements={elements} style={{ width: '600px', height: '600px' }} />;
  }
}

ReactDOM.render(<MyApp />, document.getElementById('root'));

应用案例和最佳实践

样式表

可以使用样式表来定义节点和边的样式：

<CytoscapeComponent
  elements={elements}
  stylesheet={[
    {
      selector: 'node',
      style: {
        width: 20,
        height: 20,
        shape: 'rectangle'
      }
    },
    {
      selector: 'edge',
      style: {
        width: 15
      }
    }
  ]}
/>

布局

可以使用布局来自动定位图中的节点：

<CytoscapeComponent
  elements={elements}
  layout={{ name: 'cose-bilkent' }}
/>

典型生态项目

Cytoscape.js

react-cytoscapejs 是基于 Cytoscape.js 构建的。Cytoscape.js 是一个强大的图论（网络）库，用于可视化和分析图数据。

Plotly

react-cytoscapejs 是由 Plotly 维护的，Plotly 是一个开源的图形库，提供了丰富的数据可视化工具。

通过这些模块的介绍和示例，您可以快速上手并深入了解 react-cytoscapejs 的使用和生态。