我在我的reactjs应用程序中设置了@xyflow/react来显示表沿袭，基本上我有一个导入的data.json文件，其结构显示父表、子表和该表中的列，每列也有“source_column” ”，现在我完全能够生成并显示表格谱系，甚至边缘都可见
现在想将其更改为列沿袭，其中节点仍然代表表，但我显示与该表中的每一列对应的多个句柄， 所以，假设一个表有 2 列，
我将显示那些堆叠在列表中的内容，每列将有输入和输出句柄来创建边缘
这基本上允许我创建一种多对多关系，在该关系中我连接节点内的列，现在此信息存储在每个列中以及其结构“source_column”中，所以我尝试使用为节点句柄提供 id，同时为创建的边提供相同的 id。
但是似乎没有生成任何边缘
这就是我要突破的地方：
Object.entries(value.columns).forEach((column) => {
var columndetails = column[1];
columndetails.source_columns.forEach((sourceColumn, idx) => {
const sourceTable = columndetails.source_tables[idx];
const edgeId = `edge-${sourceTable}-${sourceColumn}-to-${key}-${column[0]}`;
const sourceId = `${sourceTable}-${sourceColumn}-output`;
const targetId = `${key}-${column[0]}-input`;
edges.push({
id: edgeId,
source: sourceId,
target: targetId,
animated: true,
style: defaultEdgeStyle,
});
});
这是我尝试创建具有相同 ID 的句柄的地方，以确保在推动边缘时找到目标和源 ID
<div style={{ position: "relative", padding: "20px" }}>
{Object.entries(data.columns).map(([columnName, columnDetails], index) => {
const positionStyle = { top: `${92 + index * 33}px`, background: "#555" };
// Handles for columns that are targets (sourced from other columns)
const targetHandles = columnDetails.source_columns.map((sourceColumn, idx) => {
const sourceTable = columnDetails.source_tables[idx];
const sourceId = `${sourceTable}-${sourceColumn}-output`;
const targetId = `${data.label}-${columnName}-input`;
return (
<Handle
key={`${columnName}-input-${idx}`}
type="target"
position={handlePosition}
id={targetId}
style={positionStyle}
/>
);
});
// Handle for columns that are sources (output to other columns)
const outputHandle = (
<Handle
key={`${columnName}-output`}
type="source"
position={sourcePosition}
id={`${data.label}-${columnName}-output`}
style={positionStyle}
/>
);
return (
<React.Fragment key={columnName}>
{targetHandles}
{outputHandle}
</React.Fragment>
);
})}
</div>
此代码之前适用于表沿袭，它基本上使用相同的方法，但仅适用于通过边缘链接的父/子表：
Table Lineage 的工作代码：
value.child_tables.forEach((child, index) => {
edges.push({
id: `e${key}-${child}`,
source: key,
target: child,
animated: true,
style: defaultEdgeStyle,
});
if (orientation === "horizontal") {
processNode(
child,
startX + index * siblingOffset,
y + verticalSpacing,
level + 1
);
} else {
processNode(
child,
x + horizontalSpacing,
startY + index * siblingOffset,
level + 1
);
}
});
data.json 示例：
{
"MASTER_DAILY_FILE": {
"table_type": "RAW",
"child_tables": [
"BIF_INFO"
],
"parent_tables": [],
"columns": {
"account_key": {
"description": "Unique identifier for the account",
"type": "integer",
"transformation_logic": "",
"sample_value": "12345",
"source_tables": [],
"source_columns": []
},
"date_iden": {
"description": "Date identifier",
"type": "date",
"transformation_logic": "",
"sample_value": "2023-10-01",
"source_tables": [],
"source_columns": []
}
},
"table_transformation_logic": null
},
"BIF_INFO": {
"table_type": "RAW",
"child_tables": [
],
"parent_tables": [],
"columns": {
"branch_identifier": {
"description": "Unique identifier for the branch",
"type": "String",
"transformation_logic": "",
"sample_value": "12345",
"source_tables": ["MASTER_DAILY_FILE"],
"source_columns": ["account_key"]
},
"phone_no": {
"description": "Phone number of the branch",
"type": "String",
"transformation_logic": "",
"sample_value": "555-1234",
"source_tables": ["MASTER_DAILY_FILE"],
"source_columns": ["account_key"]
},
"branch_manager_name": {
"description": "Name of the branch manager",
"type": "String",
"transformation_logic": "",
"sample_value": "John Doe",
"source_tables": [],
"source_columns": []
},
"employee_name": {
"description": "Name of the employee",
"type": "String",
"transformation_logic": "",
"sample_value": "Jane Smith",
"source_tables": [],
"source_columns": []
},
"address_po": {
"description": "Indicator if the address is a PO Box",
"type": "String",
"transformation_logic": "",
"sample_value": "Y",
"source_tables": ["MASTER_DAILY_FILE"],
"source_columns": ["account_key"]
},
"po_box_num": {
"description": "PO Box number",
"type": "String",
"transformation_logic": "",
"sample_value": "123",
"source_tables": [],
"source_columns": []
},
"street_address": {
"description": "Street address of the branch",
"type": "String",
"transformation_logic": "",
"sample_value": "123 Main St",
"source_tables": [],
"source_columns": []
},
"street_address_1": {
"description": "Alternative street address of the branch",
"type": "String",
"transformation_logic": "",
"sample_value": "Main St",
"source_tables": [],
"source_columns": []
},
"branch_city": {
"description": "City of the branch",
"type": "String",
"transformation_logic": "",
"sample_value": "New York",
"source_tables": [],
"source_columns": []
},
"city_name": {
"description": "Name of the city",
"type": "String",
"transformation_logic": "",
"sample_value": "New York",
"source_tables": [],
"source_columns": []
},
"po_state_cd": {
"description": "State code for PO Box address",
"type": "String",
"transformation_logic": "",
"sample_value": "NY",
"source_tables": [],
"source_columns": []
},
"st_state_cd": {
"description": "State code for street address",
"type": "String",
"transformation_logic": "",
"sample_value": "NY",
"source_tables": [],
"source_columns": []
},
"postal_cd": {
"description": "Postal code for PO Box address",
"type": "String",
"transformation_logic": "",
"sample_value": "10001",
"source_tables": [],
"source_columns": []
},
"st_postal_cd": {
"description": "Postal code for street address",
"type": "String",
"transformation_logic": "",
"sample_value": "10001",
"source_tables": [],
"source_columns": []
},
"branch_close_dt": {
"description": "Date when the branch was closed",
"type": "Date",
"transformation_logic": "",
"sample_value": "2023-01-01",
"source_tables": ["MASTER_DAILY_FILE"],
"source_columns": ["account_key"]
},
"branch_num": {
"description": "Branch number",
"type": "Integer",
"transformation_logic": "",
"sample_value": "100001",
"source_tables": [],
"source_columns": []
}
},
"table_transformation_logic": null
}
}
我已经尝试了很多东西，但当我尝试获取列谱系时，只有节点可见，没有边缘出现，而对于表谱系，它工作得绝对正常
我尝试过测试和调试的一些东西：
遇到这个问题，新的 @xyflow/react 的
interactionWidth同时，什么对我有用，可以使用“旧”的“reactflow”库。
所以你在哪里，
import { ReactFlow } from "@xyflow/react";
替换为
import { ReactFlow } from "reactflow";
确保先做
npm i reactflow