React-Digraph 使用教程

项目介绍

React-Digraph 是一个用于创建和编辑有向图的 React 组件。它封装了 SVG 绘图和事件处理的逻辑，使得开发者可以轻松地集成图编辑器到他们的项目中。React-Digraph 提供了丰富的功能，包括节点和边的多选、复制粘贴等，适用于需要复杂图编辑的场景。

项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 React-Digraph：

npm install --save react-digraph

基本使用

以下是一个简单的示例，展示如何在 React 项目中使用 React-Digraph：

import React from 'react';
import { GraphView } from 'react-digraph';

const NodeTypes = {
  // 定义节点类型
};

const NodeSubtypes = {
  // 定义节点子类型
};

const GraphConfig = {
  NodeTypes,
  NodeSubtypes,
  // 其他配置
};

const initialNodes = [
  { id: 1, type: 'empty', x: 100, y: 100 },
  { id: 2, type: 'empty', x: 200, y: 200 },
];

const initialEdges = [
  { source: 1, target: 2 },
];

function App() {
  const [nodes, setNodes] = React.useState(initialNodes);
  const [edges, setEdges] = React.useState(initialEdges);

  const handleCreateNode = (x, y) => {
    const newNode = { id: nodes.length + 1, type: 'empty', x, y };
    setNodes([...nodes, newNode]);
  };

  const handleCreateEdge = (sourceNodeId, targetNodeId) => {
    const newEdge = { source: sourceNodeId, target: targetNodeId };
    setEdges([...edges, newEdge]);
  };

  return (
    <GraphView
      nodeKey="id"
      nodes={nodes}
      edges={edges}
      nodeTypes={NodeTypes}
      nodeSubtypes={NodeSubtypes}
      graphConfig={GraphConfig}
      onCreateNode={handleCreateNode}
      onCreateEdge={handleCreateEdge}
      onDeleteNode={(nodeId) => {
        setNodes(nodes.filter(node => node.id !== nodeId));
      }}
      onDeleteEdge={(edgeId) => {
        setEdges(edges.filter(edge => edge.id !== edgeId));
      }}
    />
  );
}

export default App;

应用案例和最佳实践

应用案例

React-Digraph 已经被多个项目成功应用，例如：

• CFP (Corporate Finance Planning): 用于企业财务规划的图编辑器。
• Recon: 数据源编辑器，用于数据校验和整合。
• CJC (Centralized Journal Converter): 用于将财务报告转换为日记账格式的工具。

最佳实践

• 自定义节点和边: 根据项目需求定义节点和边的类型和样式。
• 事件处理: 合理处理节点和边的创建、删除和选择事件。
• 性能优化: 在高节点数量的情况下，注意性能优化，例如分页加载节点。

典型生态项目

React-Digraph 可以与以下生态项目结合使用：

• Redux: 用于状态管理，确保图编辑器的状态在应用中一致。
• D3.js: 虽然 React-Digraph 封装了 D3，但在某些高级定制场景中，D3 仍然是一个强大的工具。
• React Router: 用于在不同页面之间导航，管理图编辑器的不同视图。

通过结合这些生态项目，可以构建更加复杂和功能丰富的图编辑应用。