乐趣区

撸了个开源关系图谱可视化库roccharts

在工作中接触到了关系图谱可视化相关功能,那么什么是关系图谱呢?


就是这样的东东。

当然,上面这个只是个力导向图,而展现关系的图谱却有很多种。更重要的是,将关系展现出来只是图谱的基础功能,而很多时候我们需要对图谱进行各种操作,比如拖拽、点击、删除、新增等等。
roc-charts 就是结合了展现与操作的一个可视化库,并且具有很强的可配置、可扩展性。

首先,我们看下 roc-charts 长什么样:

可以看到,在图谱的顶部有一排操作按钮,这些都是 roc-charts 的插件,而我们可以轻松的开发更多功能的插件用于增强图谱的功能。
而插件不仅是顶部按钮,比如鼠标悬浮信息展示,右键功能等都是以插件的形式开发,扩展性能满足各种需求。

节点信息插件

右键菜单插件

插件可以扩展各种功能,那绘制的图谱布局呢?当然可可以扩展。上面就展现了力导图和环形图两种布局,roc-charts 目前内置了三种常用布局,因为每个人对布局的需求可能不同,因此更建议大家实现自己的布局注册到插件中,这也是非常的简单。

下面就讲讲 roc-charts 的基本使用:

安装 roc-charts

yarn add roc-charts
or
npm 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

退出移动版