mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 10:01:09 +08:00
15d41fbe94
* docs: add Custom Theme Extension * docs: add custom transform tutorial * docs: format docs of items (nodes, edges, combos) --------- Co-authored-by: yvonneyx <banxuan.zyx@antgroup.com>
2.6 KiB
2.6 KiB
| title | order |
|---|---|
| 自定义数据处理 | 4 |
在进行自定义数据处理器之前，请确保您已经熟悉了 G6 数据流和数据结构。相关内容可以参考数据介绍文档。
自定义数据处理器本质上是一个函数，它负责将用户数据 (user data) 转换为 G6 内部可以理解和处理的格式 (inner data)。
类型：CustomDataTransformFn
type CustomDataTransformFn = (
data: GraphDataChanges,
options: Record<string, any>,
graphCore?: GraphCore,
) => GraphDataChanges;
GraphDataChanges 定义如下：
G6 会根据操作类型，将数据变更自动划分为三个部分：待添加（dataAdded）、更新（dataUpdated）和删除（dataRemoved）数据。
type GraphData = {
nodes?: NodeUserModel[];
edges?: EdgeUserModel[];
combos?: ComboUserModel[];
};
type GraphDataChanges = {
dataAdded: GraphData;
dataUpdated: GraphData;
dataRemoved: GraphData;
};
其中，输入数据类型参考 NodeUserModel 输入数据，EdgeUserModel 输入数据 和 ComboUserModel 输入数据。
请确保您的处理器返回的数据严格遵守 GraphDataChanges 类型定义，以保证处理器能顺利嵌入 G6 的数据处理流程中。
示例
这里以实现一个简单的数据处理为例，该数据处理器目的是对给定的节点数据进行聚类处理。
const clusteringNodes = (dataAUR = {}, options = {}, graphCore) => {
const { dataAdded = {}, dataUpdated = {}, dataRemoved = {} } = dataAUR;
const handler = (data = {}, options = {}, core) => {
if (!Algorithm?.labelPropagation || !data.nodes?.length) return data;
const nodes = graphCore ? core.getAllNodes() : data.nodes;
const edges = graphCore ? core.getAllEdges() : data.edges;
const clusteredData = Algorithm.labelPropagation({ nodes, edges }, false);
clusteredData.clusters.forEach((cluster, i) => {
cluster.nodes.forEach((node) => {
node.data.cluster = `c${i}`;
});
});
return data;
};
return {
dataAdded: handler(dataAdded, options, graphCore),
dataUpdated: handler(dataUpdated, options, graphCore),
dataRemoved: dataRemoved || {},
};
};
const ExtGraph = extend(Graph, {
transforms: {
'clustering-node': clusteringNodes,
},
});
const graph = new ExtGraph({
// ...其他配置
transforms: [
'map-node-size',
{
type: 'clustering-node',
activeLifecycle: ['read', 'changeData'],
},
],
});