使用 React ForceGraph2D 可视化数据网格
微信搜索关注《Java学研大本营》，加入读者群，分享更多精彩
我们之前的文章探讨了数据网格的元架构、一种使用 ORM 对目录建模的方法，以及使用 React、Relay 和 GraphQL 的目录体验。到目前为止，我们有办法获得网格实体的基本分析和搜索功能。然而，为了释放我们构建的实体关系和概念的全部潜力，我们需要一种可视化机制来获得更深入的洞察力。本文将概述我们如何使用React ForceGraph2D可视化网格并帮助用户做出有关数据产品、数据集和域的明智决策。
在第一次迭代中，我们专注于一些基本功能，用户可以通过这些功能完成以下旅程：
-
作为审计的一部分，查找数据产品的所有输入和输出数据集。
-
给定一个不健康的数据产品，找到所有传出路径以确定所有受影响的数据集和其他数据产品。
作为构建这些旅程的初步步骤，我们将构建图形可视化、过滤、搜索和缩放功能。让我们从形成 GraphQL 查询开始，以拉入我们感兴趣的节点和关系。通过我们之前的中继设置，检索到的数据将包含具有一些属性的数据产品集合以及域、标签、输入的边缘属性，和输出数据集。
我们在形成查询时做出的一个重要选择是将数据产品作为顶级节点，并通过它们定义所有关系。这将在以后简化图形数据的生成。
const MeshQuery = graphql`
query meshQuery {
dataproducts {
edges {
node {
__typename
name
id
qualityscore
qualitythreshold
qualitydashboard
ownedby {
__typename
id
name
}
taggedwith {
__typename
id
name
}
inputs {
__typename
id
name
}
outputs {
__typename
id
name
}
}
}
totalCount
}
}
`;
我们现在可以使用此数据来创建由组件契约定义的图形数据结构。例如，以下代码显示了将“对象”递归解析为图形节点。
parseNode(obj: any, config: ParseConfig): GraphNode {
const node = this.createOrGetNode(obj, config);
for (var [k, v] of Object.entries(obj)) {
if (v == null || config.isSpecialField(k)) {
continue;
}
if (Array.isArray(v)) {
v.forEach((inner) => {
var neighbor = this.parseNode(inner, config);
this.addEdge(node, neighbor, k, config);
});
} else if (isObj(v)) {
var neighbor = this.parseNode(v, config);
this.addEdge(node, neighbor, k, config);
} else {
node.properties[k] = v;
}
}
this.nodes.set(node.id, node);
this.nodeLabels.add(node.label);
return node;
}
请注意，我们允许使用ParseConfig自定义 id、type、name 字段和方向关系。它足够通用，可以被任何 GraphQL 结果数据使用。稍后我们将使用方向信息来查找节点的所有出站路径。
一旦我们翻译了顶级对象的集合及其与其他对象的关系，我们就可以用这些数据加载 ForceGraph2D。例如，在下面的示例网格图像中，我们还使用nodeVisibility 属性过滤了 Tag 节点。
查找所有输入和输出数据集
在用户旅程中，我们会在图中搜索并找到一个数据产品节点，并为它识别所有的输入和输出数据集。
作为图形节点对象的一部分，我们有节点坐标。我们可以使用这个和底层的力图参考和方法将节点居中并缩放到节点。当用户将鼠标悬停在某个节点上时，图中所有一级节点都将高亮显示。
查找数据产品的传出路径
假设我们有一个不健康的节点，并希望找到所有受影响的数据产品和数据集。
当用户点击任何Dataset或DataProduct节点时，我们通过递归遍历所有有向链接找到输出路径。请注意边缘是否是方向性的以及在上面的解析阶段配置的方向。
handleNodeClick = (node: GraphNodeObject) => {
this.highlightNodes.clear();
this.highlightLinks.clear();
if (this.click) {
this.click = false;
return;
}
if (node) {
this.click = true;
this.highlightOutgoingPath(node);
}
};
highlightOutgoingPath = (node: GraphNodeObject | undefined) => {
if (node == undefined || this.highlightNodes.has(node.id)) {
return;
}
this.highlightNodes.add(node.id);
node.links &&
node.links.forEach((link: GraphEdge) => {
if (link.directional && link.sourceNode.id == node.id) {
this.highlightLinks.add(link.id);
node.neighbors &&
this.highlightOutgoingPath(node.neighbors.get(link.targetNode.id));
}
});
};
另外，请注意下面的 .gif 使用 ForceGraph2D 的linkDirectionalParticles属性显示了数据流的方向。
回顾
在本文中，我们在继续定义用户体验时为数据网格构建了一个基本的图形可视化。从这里，我们可以添加功能，例如子图查看和搜索、从选定节点创建导出以及 3D 可视化（预览如下）。
推荐书单
《项目驱动零起点学Java》
《项目驱动零起点学Java》共分 13 章，围绕 6 个项目和 258 个代码示例，分别介绍了走进Java 的世界、变量与数据类型、运算符、流程控制、方法、数组、面向对象、异常、常用类、集合、I/O流、多线程、网络编程相关内容。《项目驱动零起点学Java》总结了马士兵老师从事Java培训十余年来经受了市场检验的教研成果，通过6 个项目以及每章的示例和习题，可以帮助读者快速掌握Java 编程的语法以及算法实现。扫描每章提供的二维码可观看相应章节内容的视频讲解。
《项目驱动零起点学Java》贯穿6个完整项目，经过作者多年教学经验提炼而得，项目从小到大、从短到长，可以让读者在练习项目的过程中，快速掌握一系列知识点。
马士兵，马士兵教育创始人，毕业于清华大学，著名IT讲师，所讲课程广受欢迎，学生遍布全球大厂，擅长用简单的语言讲授复杂的问题，擅长项目驱动知识的综合学习。马士兵教育获得在线教育“名课堂”奖、“最受欢迎机构”奖。
赵珊珊，从事多年一线开发，曾为国税、地税税务系统工作。拥有7年一线教学经验，多年线上、线下教育的积累沉淀，培养学员数万名，讲解细致，脉络清晰。
https://item.jd.com/13607758.html
精彩回顾
微信搜索关注《Java学研大本营》
访问【IT今日热榜】，发现每日技术热点
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
