|
|
@@ -69,17 +69,17 @@ export default {
|
|
|
},
|
|
|
defaultNode: {
|
|
|
size: 40,
|
|
|
+ style: {
|
|
|
+ fill: 'rgba(24, 144, 255, 0.2)', // 浅蓝半透明
|
|
|
+ stroke: '#1890ff', // 实色边框
|
|
|
+ lineWidth: 2 // 边框宽度
|
|
|
+ },
|
|
|
labelCfg: {
|
|
|
position: 'bottom', // 标签显示在节点下方
|
|
|
style: {
|
|
|
fill: '#000',
|
|
|
fontSize: 12
|
|
|
}
|
|
|
- },
|
|
|
- style: {
|
|
|
- fill: '#4B9EFF', // 圆圈填充色
|
|
|
- stroke: '#4B9EFF', // 圆圈边框色（与填充色一致，实现无边框效果）
|
|
|
- lineWidth: 0 // 边框宽度为0，彻底去掉边框
|
|
|
}
|
|
|
},
|
|
|
defaultEdge: {
|
|
|
@@ -94,14 +94,74 @@ export default {
|
|
|
});
|
|
|
|
|
|
|
|
|
+ const nodeIds = new Set(data.nodes.map(node => node.id));
|
|
|
+
|
|
|
+ // 统计每个节点的连线数量
|
|
|
+ const linkCount = {};
|
|
|
+ data.edges.forEach(edge => {
|
|
|
+ if (edge.source) linkCount[edge.source] = (linkCount[edge.source] || 0) + 1;
|
|
|
+ if (edge.target) linkCount[edge.target] = (linkCount[edge.target] || 0) + 1;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 六档蓝色系（更有区分度）
|
|
|
+ const strokeColors = [
|
|
|
+ '#b3e5fc', // 0 浅蓝青
|
|
|
+ '#4fc3f7', // 1 天蓝
|
|
|
+ '#0288d1', // 2 深天蓝
|
|
|
+ '#1976d2', // 3 标准蓝
|
|
|
+ '#1565c0', // 4 深蓝
|
|
|
+ '#0d47a1', // 5 靛蓝
|
|
|
+ '#002171' // 6+ 极深蓝
|
|
|
+ ];
|
|
|
+ const fillColors = [
|
|
|
+ 'rgba(179,229,252,0.2)',
|
|
|
+ 'rgba(79,195,247,0.2)',
|
|
|
+ 'rgba(2,136,209,0.2)',
|
|
|
+ 'rgba(25,118,210,0.2)',
|
|
|
+ 'rgba(21,101,192,0.2)',
|
|
|
+ 'rgba(13,71,161,0.2)',
|
|
|
+ 'rgba(0,33,113,0.2)'
|
|
|
+ ];
|
|
|
+
|
|
|
const graphData = {
|
|
|
- nodes: data.nodes,
|
|
|
- edges: data.edges.map(edge => ({
|
|
|
- ...edge,
|
|
|
- label: edge.predicate
|
|
|
- }))
|
|
|
+ nodes: data.nodes.map(node => {
|
|
|
+ const count = linkCount[node.id] || 0;
|
|
|
+ const cappedCount = Math.min(count, 6);
|
|
|
+ const size = 20 + count * 10; // 不封顶
|
|
|
+ const stroke = strokeColors[cappedCount];
|
|
|
+ const fill = fillColors[cappedCount];
|
|
|
+ // 保留 comboId 字段
|
|
|
+ const nodeData = {
|
|
|
+ id: node.id,
|
|
|
+ label: node.label,
|
|
|
+ size,
|
|
|
+ style: {
|
|
|
+ fill,
|
|
|
+ stroke,
|
|
|
+ lineWidth: 2
|
|
|
+ }
|
|
|
+ };
|
|
|
+ if (node.comboId) nodeData.comboId = node.comboId;
|
|
|
+ return nodeData;
|
|
|
+ }),
|
|
|
+ edges: data.edges
|
|
|
+ .filter(edge => {
|
|
|
+ const sourceExists = nodeIds.has(edge.source);
|
|
|
+ const targetExists = nodeIds.has(edge.target);
|
|
|
+ if (!sourceExists || !targetExists) {
|
|
|
+ console.warn('Filtering out edge with non-existent node ID:', edge);
|
|
|
+ }
|
|
|
+ return sourceExists && targetExists;
|
|
|
+ })
|
|
|
+ .map(edge => ({
|
|
|
+ source: edge.source,
|
|
|
+ target: edge.target,
|
|
|
+ label: edge.predicate,
|
|
|
+ })),
|
|
|
+ combos: Array.isArray(data.combos) ? data.combos : undefined
|
|
|
};
|
|
|
-
|
|
|
+ console.log('graphData',graphData);
|
|
|
+
|
|
|
this.graph.data(graphData);
|
|
|
this.graph.render();
|
|
|
|
