cyberreboot/crviz

CRviz

![Build Status]([] ![Codacy Badge]([] ![codecov]([***]

镜像概述

CRviz是CyberReboot首次尝试以不同方式可视化网络的工具，目前处于早期原型阶段，仍在开发中。分享此工具是因为其在提升网络数据可扩展性和可读性方面具有潜力，同时团队也积极寻求用户反馈，欢迎提出建议和意见。

更多细节请查看博客文章，在线演示可访问https://cyberreboot.github.io/CRviz/%E3%80%82

核心功能

1. 支持从URL或本地文件加载数据集（URL需启用跨域资源共享CORS）
2. 提供预配置数据集选项（通过src/datasets.json定义）
3. 基于ReactJS和D3.js构建，具备良好的交互性和可视化效果
4. 支持开发环境热重载和生产环境构建部署

使用场景

• 大型网络结构的直观分析与探索
• 网络数据的可视化展示与报告生成
• 网络相关研究或教学中的数据可视化辅助工具

配置说明

数据格式要求

工具期望数据包含以下字段：

ConfigurationObject

AttributeObject

预配置数据集

预配置数据集（显示在下拉菜单中）定义于src/datasets.json，需包含以下属性：

修改后需重新构建以生效。

部署与运行

使用Docker

项目包含Dockerfile便于构建和部署：

bash
# 构建镜像
docker build -t crviz .
# 运行容器（映射80端口到容器5000端口）
docker run -dp 80:5000 crviz

若主机文件修改，容器内构建不会自动更新。停止容器命令：

bash
docker stop crviz

不使用Docker

1. 安装或更新npm（sudo apt install npm或npm install -g npm）
2. 克隆仓库：git clone https://github.com/CyberReboot/CRviz.git
3. 进入目录：cd CRviz
4. 构建：npm install && npm run build

构建后的静态文件位于./build目录，可部署到服务器。本地运行开发服务器：npm start，修改代码会自动重载，访问http://localhost:5000。

开发相关

技术栈

• 框架：ReactJS、Redux（含redux-actions、redux-observable）
• 可视化：D3.js
• 项目脚手架：create-react-app

开发命令

• npm install：安装依赖
• npm start：启动热重载开发服务器
• npm test：运行测试并监听变化
• npm build：构建生产优化包

工具推荐

• React开发者工具

项目结构

• src/domain：Redux reducer、action creator、selector等
• src/epics：redux-observable相关逻辑
• src/features：按功能组织的React组件