roc-charts 開源的輕量級關系圖譜框架

此框架基於 zrender 開發，用於展現節點之間的關系。關系的呈現（圖譜布局）主要還是由使用者決定，可以很簡單的將自己的布局算法加入到此框架中，而框架更多的作用是實現圖譜操作功能，此框架內置了一些常用功能，也提供了插件機制可供開發更多功能。

 

框架的使用:

yarn add roc-charts 或 npm install roc-charts

import Chart from 'roc-charts;

const chart = new Chart({
    id: 'chart',  // 繪制圖譜 dom 的 id
    type: 'force',  // 圖譜類型
    data: chartData,  // 圖譜數據
});
chart.init(config);  // 調用 init 方法繪圖，配置項可選

 

支持自定義圖布局和插件： 

自定義圖譜：

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);

 

此框架已開源在 github 上，喜歡的點個星星~

項目地址：https://github.com/hepeng10/roc-charts

在線 Demo：https://hepeng10.github.io/roc-charts-demo/#/

在線文檔：https://hepeng10.github.io/roc-charts-document/