star-graph

海致星图-图谱组件库

目录结构

.
+-- demos
|   +-- vanilla-demo  // 原生 JS demo
|   +-- node-demo     // node demo，主要是用于服务端渲染输出图片
|   +-- react-demo
|   +-- vue-demo
+-- dist              // 打包输出路径
+-- docs              // 相关文档
+-- src
|   +-- base.ts       // Graph 基类、GraphOptions 接口，所有类和配置都要继承自这两者
|   +-- index.ts      // 所有组件出口
|   +-- force         // force 模块
|   +-- ...           // 其他模块
+-- package.json
+-- rollup.config.js
+-- tsconfig.json

技术架构

组件使用的技术包括：

• TypeScript
• Rollup
• d3

特性

组件支持的运行环境包括：

• browser
  • 兼容至 IE9+
  • 使用原生 JS 书写，能够和任何框架组合使用
• node
  • 支持使用 node 进行服务端渲染，输出图片

提供了以下图谱组件：

• force（力导向图）

使用方式

Rollup 配置参考

开发

安装依赖

yarn install

启动开发模式，使用 rollup 的 watch 模式

yarn watch

要新增组件的话（以 force 为例）

1. 在 src 中增加相关目录，force
2. 在 force 中增加 index.d.ts，声明相关接口
3. 在 force 中增加 index.ts，编写组件
4. 在 demos 中增加相关 demo
5. 同步更新 README 和 docs 中文档

开发时，如何在 demos 中引用最新组件库？

使用 yarn link

以 vanilla 为例

1. 在根目录中执行 yarn link
2. 在 vanilla-demo 中执行 yarn install
3. 在 vanilla-demo 中执行 yarn link star-graph，此时 vanilla 的 node_modules 中就会出现 star-graph 的符号链接

然后，就可以从 demos/vanilla/node_modules 引入最新的组件代码了。

yarn dev-vanilla  // 启动原生 js demo
yarn dev-react    // 启动 react demo

发布

yarn build

会在 dist 中输出三种格式文件

• index.js
  • commonJS 格式，用于 node
• index.iife.js
  • 立即执行函数格式，用于浏览器原生环境，需要手动引入 d3.js
• index.es.js
  • ES module 格式，用于支持模块导入的现代前端框架，如 React / Vue

引入

直接从 git 安装

yarn add git+http://git.sz.haizhi.com/xieyuzhong/star-graph.git

文档

1. 编写可配置的组件
2. 如何应对不同项目的需求

待增加的组件

• [ ] 树形图
• [ ] 结构图
• [ ] 气泡图
• [ ] 三层结构图（单一企业视角）
• [ ] 力导向图（canvas）

TODOS

• [ ] 单元测试