在工作中接触到了关系图谱可视化相关功能，那么什么是关系图谱呢？
就是这样的东东。
当然，上面这个只是个力导向图，而展现关系的图谱却有很多种。更重要的是，将关系展现出来只是图谱的基础功能，而很多时候我们需要对图谱进行各种操作，比如拖拽、点击、删除、新增等等。
roc-charts 就是结合了展现与操作的一个可视化库，并且具有很强的可配置、可扩展性。
首先，我们看下 roc-charts 长什么样：
可以看到，在图谱的顶部有一排操作按钮，这些都是 roc-charts 的插件，而我们可以轻松的开发更多功能的插件用于增强图谱的功能。
而插件不仅是顶部按钮，比如鼠标悬浮信息展示，右键功能等都是以插件的形式开发，扩展性能满足各种需求。
节点信息插件
右键菜单插件
插件可以扩展各种功能，那绘制的图谱布局呢？当然可可以扩展。上面就展现了力导图和环形图两种布局，roc-charts 目前内置了三种常用布局，因为每个人对布局的需求可能不同，因此更建议大家实现自己的布局注册到插件中，这也是非常的简单。
下面就讲讲 roc-charts 的基本使用：
安装 roc-charts
yarn add roc-chartsornpm install roc-charts使用 roc-charts
const chart = new Chart({ id: 'chart', // 绘制图谱 dom 的 id type: 'force', // 图谱类型 data: chartData, // 图谱数据});chart.init(config); // 调用 init 方法绘图，配置项可选基本参数说明
const data = { nodes: [ { id: 1, // 节点 id name: 'xxx', // 节点名称（可选） }, ... ], links: [ { from: 1, // 开始节点 id to: 2, // 结束节点 id text: 'yyy', // 线上的文字（可选） } ... ]}基本的使用就这么简单。当然我知道大家不会满足基本使用的。
下面简单讲讲自定义图谱和插件：
自定义图谱
import Chart, { ChartBase } from 'roc-charts';// 创建自己的图谱布局类。继承 ChartBase，通过 compute 方法计算坐标class CustomChart extends ChartBase { // 必须的静态属性，图谱中会用到 static chartName = 'customChart'; // 设置图谱的名称，初始化图谱及切换图谱使用 static chartZhName = '自定义图谱'; // 设置中文名称，切换图谱插件中鼠标悬停显示 static icon = icon; // 设置 dataURI 图标，切换图谱插件使用 // compute 方法中获取 store，通过算法修改 store 中 nodes 的 position 实现自定义图谱布局 compute() { const { nodes } = this.$store; // 修改节点的 position 即可 nodes.forEach((node, i) => { const x = positions[i].x; const y = positions[i].y; node.position = [x, y]; }); }}// 通过 registerChart 方法注册自定义图谱布局即可使用Chart.registerChart(CustomChart);const chart = new Chart({ id: 'xx', type: 'customChart', // 上面设置的图谱名称 data});自定义插件
import Chart, { PluginBase } from 'roc-charts';class CustomPlugin extends PluginBase { // 设置插件的名称 static pluginName = 'customPlugin'; // 实现插件功能 init() { ... }}// 注册自定义插件Chart.registerPlugin(CustomPlugin);以上这些也只是基本介绍啦~
而完整的使用方法已有文档提供给大家：
点击查看 roc-charts 文档
当然，我想你们也是想先感受下 roc-charts 的功能，这里提供了在线 demo：
点击查看 demo
最后，如果喜欢，请在 github 上给本项目点个星星哟~
点击进入本项目 github