![\"GalaxyVis\"](\"https://www.galaxybase.com/public/galaxyvis-logo-big.png\"){kind=logo}
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
![](\"https://galaxyvis.com/assets/example.png\")
\r\n\r\n基于 GalaxyVis，用户可以快速搭建自己的 **图相关** 应用。\r\n\r\n如果您还没有使用过 GalaxyVis， 建议通过 [快速入门](https://galaxyvis.com/Quickstart) 体验 GalaxyVis 的魅力。\r\n\r\n![](\"https://galaxyvis.com/assets/layout.gif\")
![](\"https://galaxyvis.com/assets/incre-layout.gif\")
![](\"https://galaxyvis.com/assets/map.gif\")
\r\n\r\n![](\"https://galaxyvis.com/assets/lasso.gif\")
![](\"https://galaxyvis.com/assets/highlight.gif\")
\r\n\r\n> 强大的布局、功能、动画和交互。\r\n\r\n## 特征\r\n作为一款专业的图可视化框架，GalaxyVis 具有以下特征：\r\n\r\n- **性能：** 支持百万级点边渲染，使用webgl绘图协议；\r\n- **布局：** 支持力导向、树形、层次、网格、环形、圆形深度、辐射7种布局，布局参数自由定义，并且每个布局都支持增量布局；\r\n- **分析：** 内置图分析算法；\r\n- **地图：** 集成了地图模式，更好地结合图可视化场景；\r\n- **转换：** 通过对节点和边过滤、分组，动态调整数据的方式来满足您的需求；\r\n- **样式：** 内置丰富的节点样式和边样式，可供用户自由配置；\r\n- **互动：** 移动和重新排列节点，以突出显示和调查连接的模式；\r\n\r\n## 适合人群\r\nGalaxyVis 旨在打造一个简单、易用、功能丰富、高性能的图可视化框架，适合对可视化不了解并且想要快速开发出一个酷炫可视化工具的开发者们，通过简单的API能够制作出各种复杂的应用。\r\n\r\n## 价值\r\n\r\nGalaxyVis 作为市面上极少数使用原生webgl为开发语言的图可视化框架，在性能方面优于大部分框架，能为大家带来更为流畅的体验效果；考虑webgl兼容性的同时，框架可以自动识别低版本浏览器并使用canvas进行绘制，友好地支持低版本浏览器；框架持续迭代和优化，能够让使用者轻松地开发出复杂的企业级应用。\r\n\r\n\r\n## 例子\r\n[`examples`](./examples) 文件夹包含一系列独立的 TypeScript 项目，您可以在本地进行安装：\r\n\r\n```bash\r\ngit clone https://github.com/galaxybase/GalaxyVis.git\r\ncd GalaxyVis\r\nnpm install\r\nnpm run examples // 默认端口为8086\r\n```\r\n\r\n此外，还提供了2个更真实的基于 GalaxyVis 的 Web 应用程序demo。它旨在展示一个真实的用例。\r\n\r\n- [了解 GalaxyVis 如何处理较大的数据场景](https://galaxyvis.com/demo/)\r\n- [图结合地图模式的可视化效果](https://galaxyvis.com/demo/geo)\r\n\r\n## 安装\r\n\r\n您可以使用 `npm` 在 JavaScript 或 TypeScript 项目中安装 `galaxyvis`：\r\n\r\n```bash\r\nnpm install @galaxybase/galaxyvis\r\n```\r\n\r\n## 使用\r\n\r\n```javascript\r\nconst data = {\r\n nodes: [{\r\n id: 'n1',\r\n attribute: {\r\n x: 100,\r\n y: 200,\r\n color: '#965E04',\r\n text: {\r\n content: 'n1'\r\n }\r\n }\r\n },{\r\n id: 'n2',\r\n attribute: {\r\n x: 300,\r\n y: 200,\r\n color: '#C89435',\r\n text: {\r\n content: 'n2'\r\n }\r\n }\r\n }],\r\n edges: [{\r\n id:'e1',\r\n source: 'n1',\r\n target: 'n2',\r\n attribute: {\r\n color: '#F7A456',\r\n text: {\r\n content: 'e1',\r\n }\r\n }\r\n }]\r\n}\r\nconst graph = new galaxyvis({\r\n container: 'container'\r\n});\r\ngraph.addGraph(data)\r\n```\r\n\r\n## 文档\r\n\r\n- [快速入门](https://galaxyvis.com/Quickstart)\r\n- [API](https://galaxyvis.com/Graph)\r\n\r\n\r\n## GalaxyVis 图可视化交流群\r\n\r\n欢迎 GalaxyVis 使用者、图可视化爱好者加入我们的交流群进行讨论与交流。\r\n\r\n微信号（加好友入交流群）: CLKJ-2016\r\n\r\n## 贡献\r\n\r\n感谢您为我们的项目提出宝贵的建议或意见，欢迎提交[issue](https://github.com/galaxybase/GalaxyVis/issues)。\r\n\r\n## License\r\n[Apache2 license](./LICENSE)。\r\n\r\n\r\n ","readmeFilename":"README.md"}