|
|
@@ -1060,9 +1060,11 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
console.log("每层节点数:", layerCounts);
|
|
|
|
|
|
// 根据节点数量计算每层圆的半径
|
|
|
+ // 左列：帖子标签(上) + 人设匹配(下)，右列：帖子点（同一行开始）
|
|
|
+ // 左列是主要展示区域，视图中心对准左列
|
|
|
const minRadius = 80;
|
|
|
- const maxRadius = Math.min(circleAreaWidth / 2 - 30, 350);
|
|
|
- const nodeSpacing = 70;
|
|
|
+ const maxRadius = Math.min(circleAreaWidth / 3 - 20, 180);
|
|
|
+ const nodeSpacing = 60;
|
|
|
|
|
|
function calcRadius(nodeCount) {{
|
|
|
if (nodeCount <= 1) return minRadius;
|
|
|
@@ -1072,20 +1074,12 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
}}
|
|
|
|
|
|
const layerRadius = {{
|
|
|
- 0: calcRadius(layerCounts[0]),
|
|
|
- 1: calcRadius(layerCounts[1]),
|
|
|
- 2: calcRadius(layerCounts[2])
|
|
|
+ 0: calcRadius(layerCounts[0]), // 帖子点（右列）
|
|
|
+ 1: calcRadius(layerCounts[1]), // 帖子标签（左上）
|
|
|
+ 2: calcRadius(layerCounts[2]) // 人设匹配（左下）
|
|
|
}};
|
|
|
console.log("每层半径:", layerRadius);
|
|
|
|
|
|
- // 计算三层的高度和圆心Y坐标（关系图移到左侧）
|
|
|
- const layerPadding = 50;
|
|
|
- const layerHeights = {{
|
|
|
- 0: layerRadius[0] * 2 + layerPadding,
|
|
|
- 1: layerRadius[1] * 2 + layerPadding,
|
|
|
- 2: layerRadius[2] * 2 + layerPadding
|
|
|
- }};
|
|
|
-
|
|
|
// 获取人设树数据（单棵树）
|
|
|
const personaTree = buildPersonaTreeData();
|
|
|
// 树高度自适应：根据节点数量，每个节点约12px，最小800
|
|
|
@@ -1095,23 +1089,29 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|
|
const egoRadius = 180;
|
|
|
const egoAreaHeight = egoRadius * 2 + 80;
|
|
|
|
|
|
- // 计算总高度（取圆形和树+关系图的最大值）
|
|
|
- const circleHeight = layerHeights[0] + layerHeights[1] + layerHeights[2];
|
|
|
- const height = Math.max(circleHeight + 100, treeHeight + 80, container.clientHeight);
|
|
|
+ // 计算布局：左列（帖子标签+人设匹配），右列（帖子点）
|
|
|
+ const layerPadding = 40;
|
|
|
+ const leftColHeight = layerRadius[1] * 2 + layerPadding + layerRadius[2] * 2 + layerPadding;
|
|
|
+ const circleHeight = leftColHeight;
|
|
|
+ const height = Math.max(circleHeight + 80, treeHeight + 80, container.clientHeight);
|
|
|
|
|
|
- // 计算每层圆心坐标（在右侧区域）
|
|
|
+ // 计算每层圆心坐标
|
|
|
const layerCenterX = {{}};
|
|
|
const layerCenterY = {{}};
|
|
|
|
|
|
- let currentY = layerRadius[0] + layerPadding / 2 + 30;
|
|
|
- layerCenterY[0] = currentY;
|
|
|
- layerCenterX[0] = circleAreaCenterX;
|
|
|
- currentY += layerRadius[0] + layerPadding + layerRadius[1];
|
|
|
- layerCenterY[1] = currentY;
|
|
|
- layerCenterX[1] = circleAreaCenterX;
|
|
|
- currentY += layerRadius[1] + layerPadding + layerRadius[2];
|
|
|
- layerCenterY[2] = currentY;
|
|
|
- layerCenterX[2] = circleAreaCenterX;
|
|
|
+ // 左列居中显示，右列在旁边
|
|
|
+ const leftColX = circleAreaCenterX; // 左列居中
|
|
|
+ const rightColX = leftColX + Math.max(layerRadius[1], layerRadius[2]) + layerPadding + layerRadius[0] + 30; // 右列在右边
|
|
|
+
|
|
|
+ // 左列：帖子标签（上）+ 人设匹配（下）
|
|
|
+ layerCenterX[1] = leftColX;
|
|
|
+ layerCenterY[1] = layerRadius[1] + layerPadding / 2 + 20;
|
|
|
+ layerCenterX[2] = leftColX;
|
|
|
+ layerCenterY[2] = layerCenterY[1] + layerRadius[1] + layerPadding + layerRadius[2];
|
|
|
+
|
|
|
+ // 右列：帖子点（与帖子标签同一行开始）
|
|
|
+ layerCenterX[0] = rightColX;
|
|
|
+ layerCenterY[0] = layerCenterY[1]; // 与帖子标签同一行
|
|
|
|
|
|
console.log("每层圆心X:", layerCenterX);
|
|
|
console.log("每层圆心Y:", layerCenterY);
|
